XMLHttpRequest被CORS策略阻止

什么是CORS？

CORS（Cross-Origin Resource Sharing，跨域资源共享）是一个浏览器的安全策略，它是由浏览器实现的一种机制，用于减少跨站点请求对用户数据的风险。简单来说，就是当一个网站向另一个网站发起请求时，浏览器会采取一些措施来防止恶意行为。具体来说，如果请求的资源的域名、端口或协议与当前站点不同，浏览器就会阻止请求，除非该请求的响应中包含了“Access-Control-Allow-Origin”标头。

为什么会出现“XMLHttpRequest被CORS策略阻止”？

如果您的客户端应用程序试图访问不属于您的域名的资源，例如另一个服务器主机或CDN主机上的图像、CSS或JavaScript文件，则会发生CORS错误。当XMLHttpRequest对象试图访问来自另一个域的资源时，就会出现这个错误。

如何解决“XMLHttpRequest被CORS策略阻止”？

下面有几种常见的解决方法。

1.在后端添加“Access-Control-Allow-Origin”标头

配置您的后端应用程序以包含“Access-Control-Allow-Origin”标头，该标头将指示浏览器允许来自其他域的请求。例如，在Node.js中，您可以添加以下代码：

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); // 可以替换成您需要解决跨域的网址
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

2.使用代理服务器

使用代理服务器可以解决CORS错误。例如，使用nginx做反向代理，将所有请求和响应发送到后端应用程序。

3.使用JSONP

JSONP（JSON with Padding）是一种可以解决CORS问题的方法。由于JSONP是通过动态创建< script >标签来访问资源，因此它没有遭遇CORS问题。但是，如果您需要发送请求并检索JSON数据，则可能需要对服务器代码进行更改。

4.使用WebSocket

WebSocket是一种基于TCP协议的网络通信协议。WebSocket不遇到CORS问题，因此可以使用它来避免CORS错误。但是，使用WebSocket需要进行相应的服务器代码更改，因为WebSocket的协议不同于HTTP。

总结

CORS是一个浏览器的安全策略，它会防止恶意行为并提高用户数据的安全性。当您的XMLHttpRequest被CORS策略阻止时，您可以考虑在后端添加“Access-Control-Allow-Origin”标头、使用代理服务器、使用JSONP或使用WebSocket等方法来解决问题。