Question

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

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

这是测试输出的网址

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"}

没有“承载者”的数据中没有带令牌的标头字段：

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，这只是我过去使用过的，所以如果您有一个不同的请求库可以使用，我会全力以赴。

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

Answer 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

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

Answer 2

您需要使用适当的CORS标头答复该CORS预检，以使其正常工作。其中之一的确是Access-Control-Allow-Header。该标头必须包含与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'
            },

JavaScript松弛API jQuery

2 个答案: