浏览器跨域

Posted qiyangliu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器跨域相关的知识,希望对你有一定的参考价值。

浏览器同源策略:同源指协议、域名、端口皆相同

使用同源策略的原因:出于安全考虑,主要时为了防止CSRF攻击【利用用户的登录专改发起恶意请求】

=>跨域主要时为了阻止用户读取到另一个域下的内容

请求跨域的结果是,请求被发送出去了,但是相应被浏览器拦截了。

跨域的几种方式:

  • JSONP(JSON with Padding)
  • CORS(跨域资源共享)
  • postMessage
  • document.domain

1、JSONP:JSONP是JSON的一种使用模式

  原理:利用<script>标签没有跨域限制的漏洞,通过<script>指向ige需要访问的地址并提供一个回调函数来接收数据

1 <script src="http://domain/api?param1=a&parma2=b&callback=jsonp"></script>
2 <script>
3     function jsonp(data)
4 
5     
6 </script>

  缺点:仅限于get请求

  数据接收原理:jsonP本质上是通过将情趣模拟为<script>加载,通常带有其他参数和一个callback函数名,然后服务器根据接收到的参数里的回调函数名如   callback(data...),拼装数据导函数里,然后脚本加载成功,执行本地同名回调函数,从而达到跨域。

2、CORS(跨域资源共享)

  CORS需要浏览器和后端同时支持

  浏览器会自动进行CORS通信,实现CORS通信的关键是通过后端,只要后端实现了CORS,就实现了跨域

  服务端设置Access-Control-Allow-Origin就可以开启CORS,该属性表示哪些域名可以访问资源,若设置通配符则表示所有网站都可以访问资源

3、postMessage

  常用于获取嵌入页面中的第三方页面的数据,一个页面发消息,另一个页面判断来源并接收消息

  1)发送端:

  window.parent.postMessage(‘message‘,‘http://test.com‘);

  2)接收端

  var mc = new MessageChannel();

  mc.addEventListener(‘message‘,event=>

    var origin = event.origin || event.originalEvent.origin;

    if(origin == ‘http://test.com‘)

      console.log(‘验证通过‘);

    

  );

4、document.domain

  只能用于主域名相同的情况下,如a.test.com和b.test.com

  著需要给页面添加document.domain = ‘test.com‘,表示主域名相同即可

 

以上是关于浏览器跨域的主要内容,如果未能解决你的问题,请参考以下文章

如何处理浏览器的跨域问题

如何解决IE浏览器跨域问题

遇上浏览器跨域问题怎么办?

怎么设置chrome浏览器可以跨域

AJAX跨域问题解决方法——禁止浏览器进行跨域限制

前端跨域问题