反应开发：在获取中添加标头属性会引发CORS错误[重复]

Question

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

在发送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(...);

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

注意:我有一个< code >。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

• 凭据应作为 fetch 属性包含在内，以便在预检验证中考虑授权标头。
• API 应将访问控制允许源与特定源主机一起使用，而不是“*”
• API 应使用访问控制允许凭据“true”

Answer 1

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