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

Posted 开到荼蘼223's

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了同源和跨域问题及解决方案相关的知识,希望对你有一定的参考价值。

同源策略

同源策略最早由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以上支持

以上是关于同源和跨域问题及解决方案的主要内容,如果未能解决你的问题,请参考以下文章

同源策略和跨域解决方案 CORS

同源策略和跨域解决方案 CORS

同源策略和跨域解决方案 CORS

同源策略和跨域解决方案 CORS

同源策略与跨域问题解决

JS同源策略和跨域访问