您的位置:

如何解决跨域资源共享(CORS)问题?

一、什么是跨域资源共享问题?

Web应用程序通常会从不同的域(域名、端口或协议)请求数据。当浏览器在某个域上运行脚本时,它被限制只能脚本来源的域以及和该域共享同一来源的域(同源策略)。所以在跨域请求时就会出现跨域资源共享问题。

二、引发跨域的几种场景及其解决方案

1、Ajax请求跨域

const xhr = new XMLHttpRequest();
const url = 'http://otherdomain.com/data';
xhr.open('GET', url);
xhr.withCredentials = true; // 设置xhr对象可以发送http cookie
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send();

解决方案:

服务器设置响应头 Access-Control-Allow-Origin 添加来源源文件的IP地址或者域名。例如JavaScript代码的执行环境处于 http://www.example.com/index.html,那么Access-Control-Allow-Origin响应头可以设置为 http://www.example.com,以允许该页面所有的Ajax请求都能够通过跨域限制。但是,如果Access-Control-Allow-Origin的值为*,则表示该资源谁都可以访问。

res.setHeader('Access-Control-Allow-Origin', 'http://www.example.com');

2、图片标签、脚本标签