为什么要跨域

跨域（默认get请求），通常情况下是说在两个不同的域名下面无法进行正常的通信，或者说是无法获取其他域名下面的数据，这个主要的原因是，浏览器出于安全问题的考虑，采用了同源策略，通过浏览器对JS的限制，防止恶意用户获取非法的数据。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

比如这样的一个场景，恶意用户仿造一个银行的官网，在用户输入框中嵌套了银行的页面，如果是没有同源策略的限制，那么恶意用户则可以通过这样的一种方法来获取银行用户的卡号和登录密码，这样对于浏览器来说是没有安全性可言的。同时也可以有效的规避了大部分的XSS攻击(XSS攻击原理：通过向用户界面中注入script脚本，然后在脚本中获取用户的token等身份信息，然后将身份信息发送到恶意用户指定的地方，在正常用户还没有推出的时候，也就是token等身份信息还有效的时候，通过这些信息强制登录，将正常用户挤下系统。)

 

 

常见的几种跨域与使用场景

前端的跨域主要有：JSONP跨域、iframe跨域、window.name 跨域、document.domain 跨域、cookie跨域、postMessage跨域

JSONP跨域：JSONP跨域不是一种前端技术，而是程序猿创造的一种跨域方法，JSONP跨域，是一种简单的跨域方法，兼容性比较好

iframe 跨域：操作简便 、兼容性好，单纯的使用iframe跨域无法获取其他域名下的数据

window.name 跨域：必须与iframe配合使用，可以获取其他域名下的数据

document.domain 跨域：必须保证两个要跨域的对象是有一个关联域名，只针对两个跨域对象是关联域名，如果一个域名被攻击，那么另外一个域名也有安全问题

cookie跨域：这种方法跨域的兼容性好，由于需要一些额外的设置，所以删除cookie的时候比较繁琐，必须保证两个域名为关联域名

postMessage跨域：这种方法可以直接实现将数据从A站点传输到B站点，而且解除了cookie的限制和JSONP无法获取要传入的站点的信息，这个是HTML5新增加的特性，浏览器的兼容性不是很好，低版本的浏览器不支持

 

JSONP跨域

JSONP跨域主要的依据是利用一些HTML标签的“漏洞”，然后通过跨域的方式去调用这个在别的域名下面的脚本文件，JSONP跨域有script跨域

详情查看这篇文章：JSONP方法解决跨域请求

 

 

jsonp插件

这是一个解决跨域问题的一个插件包，在项目中需要安装这个插件才能使用

 

npm install jsonp --save

 

 

 

 

 

 
 

postMessage解决跨域
 

详情查看这篇文章：HTML5新特性postMessage解决跨域
 

 

    

        

            

                

                    

                        
                    

                    

                        

                            扫码关注我们
                        

                        

                            微信号：SRE实战
                        

                        

                            拒绝背锅 运筹帷幄