为什么我在这里看到“访问控制允许原点不允许原点”错误？[重复]

如果你是一名前端开发人员，那么你可能会遇到“访问控制允许原点不允许原点”(Access-Control-Allow-Origin)的错误。这个错误通常发生在你尝试从一个域名向另一个域名发送请求的时候。本文将解释这个错误是什么，为什么它会发生以及如何解决它。

什么是“访问控制允许原点不允许原点”错误？

当你从一个域名向另一个域名发送 AJAX 请求时，浏览器会执行跨域资源共享(Cross-Origin Resource Sharing, CORS)协议来确保安全性。这个协议规定了哪些域名可以访问资源，哪些域名不能访问资源。

当你的请求被源站点(A站点)允许访问的时候，响应头中会包含一个Access-Control-Allow-Origin字段，它指定了被允许访问的源站点的域名。如果你尝试从未被允许的源站点(B站点)访问相同的资源，那么你就会得到一个“访问控制允许原点不允许原点”错误。

例如，假设你想从B站点通过AJAX请求一个在A站点上的JSON数据。请求将会包含以下HTTP头：

GET /data.json HTTP/1.1
Host: www.a.com
Origin: http://www.b.com

如果A站点允许B站点访问data.json文件，响应头就会包含以下字段：

Access-Control-Allow-Origin: http://www.b.com

但是如果A站点不允许B站点访问data.json文件，则响应头中没有Access-Control-Allow-Origin字段，浏览器就会报错“访问控制允许原点不允许原点”。

为什么会发生这个错误？

这个错误通常是由于跨域资源共享(CORS)配置不正确引起的。更具体地说，这可能是由以下原因之一导致的：

• 源站点未正确配置Access-Control-Allow-Origin响应头字段。
• 源站点未正确配置Access-Control-Allow-Methods响应头字段。
• 源站点未正确配置Access-Control-Allow-Headers响应头字段。

如何解决“访问控制允许原点不允许原点”错误？

要解决这个问题，你需要确保源站点(A站点)已经正确配置了CORS响应头。以下是一些可能的解决方案：

1. 配置Access-Control-Allow-Origin响应头字段

确保源站点(A站点)的响应头中包含Access-Control-Allow-Origin字段，并将其设置为允许访问的源站点的域名。例如，如果你想允许所有的域名都能够访问资源，可以使用以下代码：

res.setHeader('Access-Control-Allow-Origin', '*');

2. 配置Access-Control-Allow-Methods响应头字段

确保源站点(A站点)的响应头中包含Access-Control-Allow-Methods字段，并将其设置为允许访问的HTTP方法。例如，如果你想允许GET和POST方法，可以使用以下代码：

res.setHeader('Access-Control-Allow-Methods', 'GET, POST');

3. 配置Access-Control-Allow-Headers响应头字段

确保源站点(A站点)的响应头中包含Access-Control-Allow-Headers字段，并将其设置为允许访问的HTTP请求头。例如

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9774