同源和跨域问题及解决方案
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以上支持
以上是关于同源和跨域问题及解决方案的主要内容,如果未能解决你的问题,请参考以下文章