React 开发：在 fetch 中添加 headers 属性会引发 CORS 错误 [重复]答案

【问题标题】：React development: Adding headers property in fetch raises CORS error [duplicate]React 开发：在 fetch 中添加 headers 属性会引发 CORS 错误 [重复]
【发布时间】：2020-11-15 15:18:54
【问题描述】：

以下错误来自 firefox 的 Network 部分：

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

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

删除headers 部分允许请求通过（我已通过在响应header 中返回自定义消息来验证这一点）但我需要它来添加 Authorization 标头，因为我通过基本令牌验证请求（我将很快迁移到 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"

【问题讨论】：

标签： reactjs react-native cors

【解决方案1】：

据我所知，当您定义Access-Control-Allow-Credentials "true" 时，您不能指定Access-Control-Allow-Origin "*"，您必须将Access-Control-Allow-Origin 定义为特定的url 列表

【讨论】：