一、什么是跨域资源共享问题？
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、图片标签、脚本标签等跨域
<img src='http://www.imgdomain.com/image.jpg'/>
<script src='http://www.jsdomain.com/script.js'>解决方案：
服务器设置CORS响应头 Access-Control-Allow-Origin 即可。
res.setHeader('Access-Control-Allow-Origin', '*');
3、Web字体跨域
@font-face {
font-family: 'MyFont';
src: url('http://www.fontdomain.com/fonts/MyFont.woff');
}
解决方案：
服务器设置CORS响应头 Access-Control-Allow-Origin 即可。
res.setHeader('Access-Control-Allow-Origin', '*');
4、跨站脚本攻击（XSS）
<script>
const username = 'Bob';
document.cookie = `username=${username}`;
</script>
解决方案：
在服务端对任何输入输出进行过滤以及防范XSS攻击等安全漏洞。
三、使用代理服务器的解决方案
以上方案解决跨域问题涉及到后端修改代码，无法在开发阶段解决。因此，一个通用的解决方案是使用代理服务器将所有请求转发到同一域名下，然后在该域名下进行请求。这样，对于浏览器而言就不会涉及到跨域问题了。比如使用webpack-dev-server的proxy配置，可以将所有请求转发到本地的/api路径下。
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api': ''}
}
}
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/303605.html
微信扫一扫 
支付宝扫一扫 