编程爱好者之家

javascript跨域的几种方式

2018-03-04 10:59:32 297

首先了解下浏览器的同源策略

同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

那么怎样解决跨域问题的呢?


 1. 通过jsonp跨域

<script>
   var script = document.createElement('script');
   script.type = 'text/javascript';
        
   // 传参并指定回调执行函数为onBack
   script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
   document.head.appendChild(script);
        
   // 回调执行函数
   function onBack(res) {
      alert(JSON.stringify(res));
   }
</script>

2. document.domain + iframe跨域 

此方案仅限主域相同,子域不同的跨域应用场景。
 1.)父窗口:(http://www.domain.com/a.html)

 <iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
 <script>
    document.domain = 'domain.com';
   var user = 'admin';
 </script>
 2.)子窗口:(http://child.domain.com/b.html)
            
 <script>
   document.domain = 'domain.com';
   // 获取父窗口中变量
   alert('get js data from parent ---> ' + window.parent.user);
 </script>

 

    3、 nginx代理跨域

    4、 nodejs中间件代理跨域

    5、 后端在头部信息里面设置安全域名


同类文章