reactjs - React 开发：在 fetch 中添加 headers 属性会引发 CORS 错误

问题描述

以下错误来自 Firefox 的网络部分：

我已经尝试通过在发送 React API 请求（或本机 ES6 请求）时headers在本机函数中添加一个（基于类似问题的各种答案）属性来解决上述错误。fetch

fetch('API_ENDPOINT', // API_ENDPOINT is a different sub-domain
  {
    method: 'POST',
    headers: {
      'Authorization' : 'Basic XXXXXXXXXX'
    },
    body: JSON.stringify(body)
  }
).then(...);

删除该headers部分允许请求通过（我已通过在响应中返回自定义消息来验证这一点header）但我需要添加授权标头，因为我通过基本令牌对请求进行身份验证（我将很快迁移到 Bearer，但将使用相同的方法）。一旦我添加了headers属性，看起来初始的标题集就会被替换？

注意：我有一个.htaccess允许跨域请求的定义：

<IfModule mod_headers.c>
   Header add Access-Control-Allow-Methods "PUT,GET,POST,DELETE,OPTIONS"
   Header add Access-Control-Allow-Credentials "true"
   Header add Access-Control-Allow-Headers "Content-Type, Authorization, Access-Control-Allow-Credentials, Access-Control-Allow-Origin, Access-Control-Allow-Methods"
   Header add Access-Control-Allow-Origin "*"
</IfModule>

解决了：

这已通过实施此答案解决：https ://stackoverflow.com/a/42558499/335547

credentials应该包含在属性fetch中，以便在预检验证中考虑Authorization标头。
API 应该Access-Control-Allow-Origin 与特定的源主机一起使用，而不是 "*"
API应该使用Access-Control-Allow-Credentials "true"

标签： reactjsreact-nativecors

reactjs - React 开发：在 fetch 中添加 headers 属性会引发 CORS 错误

问题描述

解决方案

推荐阅读