JavaScript 松弛 api jquery答案

【问题标题】：JavaScript slack api jqueryJavaScript 松弛 api jquery
【发布时间】：2018-07-12 23:40:56
【问题描述】：

我的问题很简单，我认为创建这个程序只需要几个小时。但是现在我整天都在努力，试图找出我可能做错了什么。

我要做的就是使用他们的postMessage api 将消息发布到 Slack。我已经能够使用 slacks testing methods 成功发送消息。

这是测试输出的url

https://slack.com/api/chat.postMessage?token=xoxp-xxxxxx-xxxxxxxx-xxxxxxxx-xxxxxxxxxxx&channel=XXXXXXXX&text=Just%20need%20the%20url&as_user=jheuman&pretty=1

然后我决定使用从我的文件系统提供的这个 html 文件在本地试用它

<!DOCTYPE html>
<html>
<head>
    <title>Testing Slack API</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <button onClick="test()">Test</button>
    <button onClick="test2()">Authorization Test</button>

<script>
    function test() {
        var apiUrl = "https://slack.com/api/chat.postMessage";
        var token = "xoxp-xxxxx...";//my token has been omitted for security;
        var channel = "#general";
        var text = "Testing slack api";
        var user = "jheuman";
        var actualToken = "Bearer " + token;


        $.ajax({
            headers: {
                'Authorization':actualToken,
                'Content-Type':'application/json'
            },

            data: JSON.stringify({
                "channel": channel,
                "text": text,
                "as_user": user
            }),
            dataType: 'json',
            processData: false,
            type: 'POST',
            url: apiUrl
        })
        .done(function(data) {
            console.log(JSON.stringify(data));
        })
        .fail(function(response) {
            console.log(JSON.stringify(response));
        });


    };

    function test2() {
        var apiUrl = "https://slack.com/api/auth.test";
        var token = "xoxp-xxxxx..."; //my token has been omitted for security
        var channel = "#general";
        var text = "Testing slack api";
        var user = "jheuman";
        var actualToken = "Bearer" + token;


    $.ajax({
        headers: {
            'Authorization':actualToken
        },
        type: 'POST',
            url: apiUrl,
    })
        .done(function(data) {
        console.log(JSON.stringify(data));
        })
        .fail(function(response) {
        console.log(JSON.stringify(response));
});


    };
</script>

但是当我点击任一按钮时，我会收到以下错误：

Failed to load https://slack.com/api/chat.postMessage: Request header field 
Authorization is not allowed by Access-Control-Allow-Headers in preflight 
response.

所以根据朋友的建议，我在服务器上进行了尝试。我使用Web Server For Chrome 在端口 8887 上提供服务。首先不设置 cors 标头，然后设置 cors 标头。两者都无济于事。我收到了同样的错误。

如您所见，我也尝试了 auth.test 调用，但收到同样的错误。

Slack 特别声明他们更喜欢授权标头，并且 api 可以处理 json 数据。

我尝试过的其他方法：

数据中没有带有标记的标头字段：

data: JSON.stringify({
    'token':actualToken,
    'channel': channel,
    'text': text,
    'as_user': user
}),
dataType: 'json',
processData: false,
type: 'POST',
url: apiUrl

收到的错误：

{"ok":false,"error":"invalid_form_data"}

在没有'Bearer'的数据中没有带有令牌的标头字段：

data: JSON.stringify({
    'token':token,
    'channel': channel,
    'text': text,
    'as_user': user
}),
dataType: 'json',
processData: false,
type: 'POST',
url: apiUrl

收到的错误：

{"ok":false,"error":"invalid_form_data"}

我研究过但认为不会影响结果的事情

The type of token

那么我如何让这个帖子请求工作？

我没有设置 jquery 或 ajax，这只是我过去使用的，所以如果你有不同的请求库可以使用，我会全力以赴。

如果您需要更多信息，我会尽力提供给您

【问题讨论】：

啊哈，所以你认为如果我使用 nodejs 调用会顺利进行吗？那是我的最终目标，只是想在尝试将其放在服务器上之前对其进行测试
您是否尝试从频道名称中删除哈希？
@vol7ron 我在 URL 末尾使用了 7 位数字，但不想在这里发布，所以这不是问题，但谢谢。
根据您的错误消息，我认为这无论如何都是一个长镜头；）我仍然需要更彻底地阅读您的问题，但我很好奇您是否无法创建公共 Slack 频道用token让其他人测试得更彻底。 CORS 是一个笨重的野兽，似乎这里的一些答案应该有效。

标签： javascript jquery ajax slack-api

【解决方案1】：

由于正确配置 CORS 以发送内容类型为 application/json 的数据可能很棘手，我建议将请求以 application/x-www-form-urlencoded 发送，这是 AJAX 的默认设置。

例子：

var apiUrl = "https://slack.com/api/chat.postMessage";
var token = MY_TOKEN;
var channel = "general";
var text = "Testing slack api";
var user = "jheuman";

 $.ajax({                   
    data: {
        "token": token,
        "channel": channel,
        "text": text,
        "as_user": user
    },                      
    dataType: 'text',
    type: 'POST',           
    url: apiUrl,
    error: function(xhr,status,error){              
        console.log("error: " + error);
    },
    success: function(data) {
        console.log("result: " + data);
    }
});

如果遇到 CORS 错误，可以添加 crossDomain: true

此解决方案经过测试，可在普通浏览器中运行。

【讨论】：

乐于助人。顺便提一句。除了测试之外，我不建议在浏览器中运行此代码，因为它会暴露您的令牌。

【解决方案2】：

您需要使用适当的 CORS 标头回复该 CORS 预检以使其正常工作。其中之一确实是 Access-Control-Allow-Headers。该标头需要包含与 Access-Control-Request-Headers 标头相同的值（或更多）。

https://fetch.spec.whatwg.org/#http-cors-protocol 更详细地解释了此设置。

headers: {
                'Authorization':actualToken,
                'Content-Type':'application/json',
                'Access-Control-Allow-Headers':'x-requested-with'
            },

【讨论】：

您的服务器需要Access-Control-Allow-Origin: *的标头
调用的 API 在供应商服务器上运行，他无法控制
我怀疑布赖恩是对的。设置 cors 是在服务器端完成的，这就是为什么我很难找到解决问题的方法，因为我无法更改松弛服务器。我试过了，但它不起作用。但是感谢您的帮助！