【每日知识】跨域及解决方案

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