跨域

---

由来

同源策略是浏览器安全的基石。同源指的是： - 协议相同 - 域名相同 - 端口号相同

如果非同源，有三种行为受限制：

• Cookie、LocalStorage 和 IndexDB 无法读取。
• DOM无法获得。
• AJAX 请求不能发送。

同源策略的限制下，浏览器可以访问到后台服务器的数据，后台服务器也会正常返回数据，只是被浏览器给拦截了。

常见的跨域方案

1. jsonp

   只能发送get请求，不安全。兼容性好

2. CORS

   就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

   服务端设置Access-Control-Allow-Origin即可

   主流跨域解决方案

3. postMessage

   不是使用 Ajax 的数据通信，更多是在两个页面之间的通信。例如A、B两个页面之间。

4. WebSocket

   WebSocket是一种网络通信协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯。

5. nginx代理跨域

6. Node中间件代理跨域

   Vue脚手架的dev环境已经默认配置好

   http-proxy-middleware

   proxy-middleware

代理来解决跨域

后两种方法都属于使用代理来解决跨域的方案。 原理是：两个服务器之间是不受同源策略限制的。