vue跨域的几种方式

VUE中常用proxy来解决跨域问题

由于浏览器同源策略的原因，当本地访问后端就会出现跨域请求的问题

通过设置webpack proxy实现代理请求后，相当于浏览器与服务端中添加一个代理者

当本地发送请求的时候，代理服务器响应该请求，并将请求转发到目标服务器，目标服务器响应数据后再将数据返回给代理服务器，最终再由代理服务器将数据响应给本地

CORS是跨域资源共享

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

JSONP解决跨域

浏览器端创建一个 script 标签，并设置该标签的 src 属性。src 属性是类似于 get 请求的 url 地址。并在请求中向服务器端传递一个 callback 参数。 服务器端接收到该请求，并将返回数据包裹在 callback 函数参数中，统一作为一个新的返回数据返回给前端。 返回成功后，浏览器端会根据调用 callback，此时 callback 中的参数就是服务器端返回的数据。callback 中可以添加对返回数据的处理

iframe实现跨域

iframe 搭配 document.domain、location.hash、window.name三种方式实现跨域。

WebSocket

Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。