问题描述

我尝试通过浏览器中的 fetch API 发布一条松弛消息:

I try to post a slack message via the fetch API in a browser:

fetch('https://hooks.slack.com/services/xxx/xxx/xx', {
  method: 'post',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-type': 'application/json'
  },
  body: JSON.stringify({text: 'Hi there'})
})
  .then(response => console.log)
  .catch(error => console.error);
};

我收到以下错误消息:

Fetch API cannot load:
https://hooks.slack.com/services/xxxxxxx/xxxxx. 
Request header field Content-type is not allowed by Access-Control-Allow-Headers in preflight response.

怎么办?

推荐答案

不幸的是，Slack API 端点在处理来自前端 JavaScript 代码的跨域请求时似乎被破坏了——因为它不处理 CORS 预检 OPTIONS 请求，因此唯一的解决方案似乎是省略 Content-Type 标头.

That Slack API endpoint unfortunately appears to be broken in its handling of cross-origin requests from frontend JavaScript code—in that it doesn’t handle the CORS preflight OPTIONS request as it should—so the only solution seems to be to omit the Content-Type header.

因此，您似乎需要从请求代码的 headers 部分中删除以下内容:

So it looks like you need to remove the following from the headers part of your request code:

'Content-type': 'application/json'

该部分会触发您的浏览器执行 CORS 预检<代码>选项请求.因此，为了让您的浏览器允许您的前端 JavaScript 代码发送您尝试执行的 POST 请求，https://hooks.slack.com/services API端点必须返回一个 Access-Control-Allow-Headers 响应标头，该标头的值中包含 Content-Type.

That part triggers your browser to do a CORS preflight OPTIONS request. So, for your browser to allow your frontend JavaScript code to send the POST request you’re trying to do, the https://hooks.slack.com/services API endpoint must return an Access-Control-Allow-Headers response header that contains Content-Type in its value.

但是那个端点没有返回那个，所以预检失败并且浏览器停在那里.

But that endpoint doesn’t return that, so the preflight fails and the browser stops right there.

通常，当从前端 JavaScript 发布到需要 JSON 的 API 端点时，将 Content-Type: application/json 标头添加到请求中正是您需要做的并且应该做的事情.但在这种情况下并非如此——因为 API 端点没有正确处理它.

Normally when posting from frontend JavaScript to an API endpoint that expects JSON, adding that Content-Type: application/json header to the request is exactly what you need to do and should do. But not in this case—because that API endpoint doesn’t handle it properly.

这篇关于Slack 传入 webhook:预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Content-type的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！