![](/img/trans.png)
[英]React.js + PHP/Apache: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response
[英]Slack incoming webhook: Request header field Content-type is not allowed by Access-Control-Allow-Headers in preflight response
我尝试通过浏览器中的 fetch API 发布一条 slack 消息:
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.
怎么办?
正是疲软的API端点不幸出现在其处理从前端JavaScript的跨域请求的被打破的代码,因为它不处理CORS预检OPTIONS
请求,因为它应该那么唯一的解决办法似乎是省略Content-Type
标题。
因此,您似乎需要从请求代码的headers
部分中删除以下内容:
'Content-type': 'application/json'
'Content-type': 'application/json'
部分会触发您的浏览器执行CORS 预检OPTIONS
请求。 因此,为了让您的浏览器允许前端 JavaScript 代码发送您尝试执行的POST
请求, https://hooks.slack.com/services
API 端点必须返回一个Access-Control-Allow-Headers
响应标头在其值中包含Content-Type
。
但是该端点不会返回该标头,因此预检失败并且浏览器就在那里停止。
通常,当从前端 JavaScript 发布到需要 JSON 的 API 端点时,将Content-Type: application/json
标头添加到请求正是您需要做的和应该做的。 但在这种情况下不是——因为特定的 API 端点没有正确处理它。
我正在使用axios
并且遇到了类似的问题。 对我有用的是将Content-Type
标头设置为application/x-www-form-urlencoded
。 在此线程中找到它: https : //github.com/axios/axios/issues/475看来这会触发“简单请求”,因此避免触发 CORS 预检。 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests
哈。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.