使用 React / ES6 Promise POST 请求被 CORS 策略阻止 [重复]答案

【问题标题】：Blocked by CORS policy with a React / ES6 Promise POST request [duplicate]使用 React / ES6 Promise POST 请求被 CORS 策略阻止 [重复]
【发布时间】：2019-08-15 23:49:38
【问题描述】：

我正在向我的 API 发出 POST 请求，但收到返回“被 CORS 政策阻止”消息。

API 需要一个 XML 数据，该数据包含在一个 XML 文件中，该文件正在以下代码示例中的 exampleAccountSettings 值中导入到此请求中。

我目前从 API 返回的消息是这样的

CORS 策略已阻止从源“http://localhost:3000”获取“https://exampleAPI.com/api/settings/import”的访问权限：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 access-control-allow-origin .

这是我的承诺

    return new Promise((resolve, reject) => {
      const requestUrl = https://exampleAPI.com/api/settings/import;
      const init = {
        method: 'POST',
        mode: 'cors',
        headers: {
          authorization: localStorage.token,
          "Access-Control-Allow-Origin": "*",
        },
        body: JSON.stringify(exampleAccountSettings)
    };
    return fetch(requestUrl, init).then((response) => {
      log.debug('importAccountSettings(): response:', response);
    })
  });

所有我看到的类似于这个问题状态我需要添加类似 "Access-Control-Allow-Origin": "*" 来指定允许访问，但这似乎有没有效果。

那么 ES6 / React 是否有不同的方法，或者可能是我误解了？欢迎任何建议，或者如果有人能指出我的研究方向，我将不胜感激！

【问题讨论】：

标签： reactjs post promise cors es6-promise

【解决方案1】：

您需要能够从https://exampleAPI.com 控制服务器端响应标头。如果您不拥有该域或无法控制标头，那么您就不走运了。

出于安全原因，JavaScript 只能对同一域进行 xhr 调用（如果存在正确的标头 Access-Control-Allow-Origin 并允许您的域 - 或通配符 *，则可以跨域调用）。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：