同源和跨域问题及解决方案

Posted 2021-09-09 开到荼蘼223's

同源策略

同源策略最早由Netscape公司提出并引入浏览器，同源策略是为了浏览器安全性考虑而实施的安全政策，不同源的客户端脚本在没明确授权的情况下，不能读写对方的资源。

简单理解同源即三个相同

• 协议相同
• 域名相同
• 端口号相同

如果两个URL以上三点都满足即两个URL同源，当其中一个不满足时，我们的请求即会发生跨域问题

看下面的例子

http://a.xyz.com/text/other.html 成功
http://a.xyz.com/text2/inner/another.html 成功
https://a.xyz.com/outer.html 失败 不同协议 ( https和http )
http://a.xyz.com:8080/dir/etc.html 失败 端口号不同(8080和80)
http://a.xyy.com/dir/other.html 失败 域名不同

如果非同源,以下三种行为都会收到限制:

• Cookie、LocalStorage 和 IndexDB 无法读取。
• DOM 无法获得。
• AJAX 请求在浏览器端有跨域限制

这些限制在我们日常开发工作中带来诸多不便，当我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据，这就需要使用到跨域。

跨域

跨域是指在不同源的情况下，浏览器执行了其他网站的脚本，让某些数据实现不同域名上的共享，以达到数据共用提高处理效率的目的，需要对部分数据进行跨域访问。

不受同源策略限制的：

• 页面中的链接，重定向以及表单提交是不会受到同源策略限制的
• 在浏览器中，<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源，而不受同源限制，但浏览器限制了javascript的权限使其不能读、写加载的内容。

跨域解决方案

jsonp
jsonp 是 json with padding 的缩写，原理：服务端返回一个定义好的js函数的调用，并且将服务器的数据以该函数参数的形式传递过来，这个方法需要前后端配合,< script >不受同源策略的影响，可以访问其他域，将加载到的内容作为js代码执行通过script标签的src属性，进行域名的包装来完成跨域数据的访问

jquery对jsonp的封装

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
	$.ajax({
		url: 'http://localhost:3000/login_data',
		method: 'get',
		dataType: 'jsonp', //执行的是JSONP的请求
		success: res =>{
			console.log(res);
		}
	})
</script>

CORS跨域资源共享
CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制，所有浏览器都支持该功能（IE10以下不行）。整个CORS通信过程，都是浏览器自动完成，不需要用户参与

如果服务器允许跨域，需要在返回的响应头中携带下面信息：

            res.setHeader("Access-Control-Allow-Origin", "*");
            res.setHeader("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild");
            res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
            res.setHeader("X-Powered-By","3.2.1");
            res.setHeader("Content-Type", "application/json;charset=utf-8");

jsonp和cors对比
两者都需要前后台配合，jsonp必须使用get请求，但没有浏览器兼容问题，cors 哪种请求都可以，但是有兼容性问题，IE10以上支持