松弛传入webhook:请求头字段预检响应中的Access-Control-Allow-Headers不允许Content-type

Question

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

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.

该怎么办？

Answer 1

正是疲软的API端点不幸似乎在处理跨域请求从前端JavaScript代码,因为它不处理CORS预检断OPTIONS请求,因为它应该,所以唯一的解决办法似乎忽略Content-Type标题.

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

'Content-type': 'application/json'

该'Content-type': 'application/json'部分触发您的浏览器执行CORS预检OPTIONS请求.因此,为了让您的浏览器允许您的前端JavaScript代码发送POST您尝试执行的请求,https://hooks.slack.com/servicesAPI端点必须返回Access-Control-Allow-Headers包含Content-Type其值的响应头.

但是该端点没有返回该标头,因此预检失败并且浏览器在那里停止.

通常,当从前端JavaScript发布到期望JSON的API端点时,将该Content-Type: application/json标头添加到请求正是您需要做和应该做的.但不是在这种情况下 - 因为特定的API端点无法正确处理它.

Answer 2

我正在使用axios并且有类似的问题。对我有用的是将Content-Typeheader 设置为application/x-www-form-urlencoded。在以下线程中找到它：https : //github.com/axios/axios/issues/475 看来这触发了“简单请求”，因此避免了触发CORS预检。 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS#Simple_requests

HTH。