1.什么是跨域?
我们从一个域名的网页去访问另一个域名网页的资源时,协议、域名、端口任一不同即为跨域。
三者一样为同源,即为同源策略:是一种约定,它是浏览器最核心也最基本的安全功能。如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。
2.为什么要跨域?
因为浏览器的同源策略,就会产生跨域。
比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者不同的域名。
由于浏览器为了安全考虑,就会产生一个同源政策,不是同一个地方出来的是不允许进行交互的。
3.跨域问题解决方案
① JSONP原理
利用html里 <script> 标签src属性没有跨域限制的漏洞,网页可以得到从其他来源动态产生的数据。
<script src="其他源的文件">
JSONP请求一定需要对方的服务器做支持才可以。
②CORS 跨域资源共享 支持所有的主流浏览器 ie9+
XMLHttpRequest发送请求的时候,如果不同源,headers { Origin }
后台处理:浏览器会自动进行 CORS 通信,实现 CORS 通信的关键是后端。只要后端实现了 CORS,就实现了跨域。
服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。
Access-Control-Allow-Origin:* 所有的东西都是可以访问的。
该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源。
window.postMessage跨域 主流浏览器 ie8
注意:vue中跨域:代理proxy 本质上是 cors跨域
在vue.config.js配置文件中
proxy:{
target:
changeOrigin:
pathRewrite:
}
③Window.name + Iframe
通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。
④ location.hash + iframe
实现原理: a.html欲与c.html跨域相互通信,通过中间页b.html来实现。 三个页面,不同域之间利用iframe的location.hash传值,相同域之间直接js访问来通信。
实现步骤:一开始a.html给c.html传一个hash值,然后c.html收到hash值后,再把hash值传递给b.html,最后b.html将结果放到a.html的hash值中。
⑤ nginx反向代理
www.baidu.com/index.html需要调用www.sina.com/server.php,
可以写一个接口www.baidu.com/server.php,
由这个接口在后端去调用www.sina.com/server.php并拿到返回值,然后再返回给index.html