CORS：如何设置“Access-Control-Allowed-Origin”请求标头答案

【问题标题】：CORS: How to set 'Access-Control-Allowed-Origin' request headerCORS：如何设置“Access-Control-Allowed-Origin”请求标头
【发布时间】：2017-09-29 02:38:35
【问题描述】：

对预检请求的响应未通过访问控制检查。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:3000' 不允许访问。响应的 HTTP 状态代码为 522。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。因此，Origin 'http://localhost:3000' 不允许访问。响应的 HTTP 状态代码为 522。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

如何在 json 中添加请求头？

var options = {
        body: info,
        type: 'json'
    }

然后`

doGetCall(url, options = {}) {
let callOptions = {
  method: 'GET'
}
callOptions.headers = {
  'Content-Type': 'application/json',
  'Access-Control-Allow-Origin': 'http://localhost:3000'
}

return this.doCall(url, callOptions);

}

终于

doCall(url, options) {
if (!options.noauth) {
  options.headers = options.headers || {};
  options.headers.Authorization = 'Bearer ' + Account.token;
}
return fetch(url, options).then(response => response.json());

}

这行不通。请求头有：

access-control-request-headers:access-control-allow-origin,authorization,content-type

但没有 Access-Control-Allowed-Origin 标头。如何添加该标题？

【问题讨论】：

“响应的 HTTP 状态代码为 522” 表示来自您尝试连接的任何服务器的“连接超时”错误。您看到提及 Access-Control-Allow-Origin 响应标头的错误消息的唯一原因是您从中获取该响应的服务器没有将任何标头添加到 5xx 错误消息中；大多数服务器不会——相反，Access-Control-Allow-Origin 标头只会出现在 2xx 成功响应中。无论如何，底线是您需要找出导致 522“连接超时”服务器故障的原因。这才是真正的问题。

标签： json

【解决方案1】：

检查这个答案：How does CORS works

概览：

启用 CORS 选项以将“Access-Control-Allow-Origin”：“*”标头添加到您的响应中。不要向 Options 资源添加身份验证器。
为获得最佳实践，如果将这些标头添加到响应中，则无需覆盖浏览器设置。

“访问控制允许来源”：“*”， “访问控制允许凭据”：true

检查您的请求网址/端点以确保正常。

【讨论】：