vue 如何实现跨域

Posted 2023-03-15

参考技术A

跨域问题是因为浏览器的同源策略引起的，一种浏览器的安全机制，要求 协议，域名，端口 ，都要一致！

出于浏览器的同源策略限制，浏览器会拒绝跨域请求。

什么叫跨域？非同源请求，均为跨域。名词解释：同源 —— 如果两个页面拥有相同的协议（protocol），端口（port）和主机（host），那么这两个页面就属于同一个源（origin）。

　怎么解决跨域？最常用的三种方式： JSONP、CORS、postMessage 。

jsonp，只支持get，不支持post，需要调用前端和被调用后端配合（比较常用）

后端HttpClient进行转发，两次请求，效率低，安全（类似Nginx反向代理）

服务端设置响应头，允许跨域，适于小公司快速解决问题

Nginx搭建API接口网关

Zuul搭建API接口网关

后四种都属于服务端设置，对于目前还是一个纯前端的我来说，先把前端的搞懂再说，所以在此只说前端

jsonp工作原理理解

jsonp实际上是通过动态插入js的方式实现的跨域，因为通过script标签引入js文件没有跨域一说

web客户端通过调用脚本的方式去调用跨域服务端动态生成的js文件（一般以json为后缀），同时传递一个callback参数给服务端，服务端以这个参数名为函数名，调用此函数以参数的形式将数据传到web端，这样就实现了前端跨域请求服务端数据。

【JSONP的优缺点】

　　　优点：兼容性好（兼容低版本IE）

　　　缺点：1.JSONP只支持GET请求； 2.XMLHttpRequest相对于JSONP有着更好的错误处理机制

　　　CORS ：是W3C 推荐的一种新的官方方案，能使服务器支持 XMLHttpRequest 的跨域请求。CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源。

　　 postMessage : window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持 window.postMessage方法。