当使用XMLHttpRequest进行跨域请求时,如果被访问的服务器设置了CORS(跨域资源共享)策略,并且不允许当前域名的访问,就会出现“访问XMLHttpRequest被CORS策略阻止了”的错误。
要解决这个问题,可以使用以下方法:
- 使用服务器代理:在自己的服务器上设置一个代理,将跨域请求转发到目标服务器。这样浏览器只会请求自己的服务器,而不是直接请求目标服务器,避免了CORS的限制。
示例代码:
// 在自己的服务器上使用Node.js创建一个代理
const http = require('http');
const request = require('request');
http.createServer(function(req, res) {
const url = 'http://目标服务器的地址' + req.url;
req.pipe(request(url)).pipe(res);
}).listen(8080);
在前端代码中,将请求的URL改为自己的服务器地址,而不是目标服务器的地址。
- 添加CORS响应头:如果你有权限修改目标服务器的代码,可以在服务器端添加CORS响应头,允许特定域名的访问。
示例代码(Node.js):
// 在目标服务器的响应中添加CORS头
const http = require('http');
http.createServer(function(req, res) {
res.setHeader('Access-Control-Allow-Origin', 'http://允许访问的域名');
// 其他处理代码
}).listen(8080);
将http://允许访问的域名
替换为允许访问的域名,或者使用通配符*
允许所有域名访问。
- 使用JSONP代替XMLHttpRequest:如果目标服务器不支持CORS,你可以尝试使用JSONP来进行跨域请求。JSONP利用
<script>
标签的跨域能力,可以绕过浏览器的CORS限制。
示例代码:
function handleResponse(data) {
// 处理响应数据
}
const script = document.createElement('script');
script.src = 'http://目标服务器的地址?callback=handleResponse';
document.body.appendChild(script);
在目标服务器上,将返回的数据包装成函数调用的形式,回调函数的名称由URL参数callback
指定。