CORS“请求的资源上不存在‘Access-Control-Allow-Origin’标头。”

Posted 2023-03-03

【中文标题】CORS“请求的资源上不存在‘Access-Control-Allow-Origin’标头。”

【英文标题】：CORS "No 'Access-Control-Allow-Origin' header is present on the requested resource."

【发布时间】：2017-04-11 07:28:55

【问题描述】：

我在使用 CORS 时遇到了错误：

“XMLHttpRequest 无法加载http://graphql-swapi.parseapp.com/。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不存在“来源”“http://localhost:3000”允许访问。响应的 HTTP 状态代码为 405。”

调用服务方法时出错。

代码片段：

let headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Content-Type', 'application/json'); 
headers.append('Accept', 'application/json');
headers.append('Access-Control-Allow-Methods', 'POST');
headers.append('Access-Control-Allow-Headers', 'Content-Type');

//console.log(headers);

return this._http.post(apiUrl,  query: query, vars: '' ,  headers: headers )
  .map(res => res.json().data.planets);

当我在浏览器中禁用 CORS 时，我得到：

XMLHttpRequest 无法加载 xxx。预检响应包含无效的 HTTP 状态代码 405 错误。

查询和代码肯定是正确的。

【问题讨论】：

"No 'Access-Control-Allow-Origin' header is present on the requested resource"的可能重复

【参考方案1】：

响应的 HTTP 状态代码为 405

Look that up:

405 方法不允许

---

对预检请求的响应

Look that up:

“preflighted”请求首先通过OPTIONS方法向对方域上的资源发送一个HTTP请求，以确定实际请求是否安全发送

---

您的服务器端代码大概设置为将 CORS 标头添加到对 POST 请求的响应中，但您根本没有设置它来处理 OPTIONS 请求。

【讨论】：

我该如何解决？我必须更改服务器代码或只是应用程序代码中的某些内容？

您必须更改服务器代码，以便它可以处理选项请求。

您还应该更改客户端代码，使其不会尝试将 CORS response 标头设置为就好像它们是 request 标头一样。您的代码不能授予自己访问其他网站的权限，这将使限制毫无意义。