vue 如何实现跨域(vue实现跨域问题)

boyanx1天前技术教程3

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

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

什么叫跨域?非同源请求,均为跨域。名词解释:同源 —— 如果两个页面拥有相同的协议(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方法。

相关文章

vue + webSocket 实时任务信息通知

vue + webSocket 实时任务信息通知websocketWebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是,服务器可以主动向客户端推送...

vue3+electron开发桌面软件(5)——系统级右键实现文件上传

# 系列文章目录1. vue3+electron开发桌面软件入门与实战(0)——创建electron应用2. vue3+electron开发桌面软件入门与实战(1)——创建electron+vue3主...

Vue前端开发——组件篇(vue组件实现原理)

业务开发的过程中,经常会进行一些组件化的开发,组件常处理的一般有以下几种全局组件局部组件动态组件递归组件全局组件一般很多地方都会用到的一些功能我们一般封装成全局组件去使用,常规的建立一个全局组件的方法...

Vue 技术栈(全家桶)(vue技术栈有哪些)

Vue 技术栈(全家桶)尚硅谷前端研究院第 1 章:Vue 核心Vue 简介官网英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/介绍与描述动态构建...

Vue3项目实践-第五篇(改造登录页-Axios模拟请求数据)

本文将介绍以下内容:项目中的 public 目录和访问静态资源文件的方法使用 json 文件代替http模拟请求使用 Axios 直接访问 json 文件改造登录页,配合 Axios 进行登录请求,并...

Vue+Element UI实现断点续传、分片上传、秒传

作者:Pseudo 转发链接:https://segmentfault.com/a/1190000023434864凡是要知其然知其所以然文件上传相信很多朋友都有遇到过,那或许你也遇到过当上传大文件时...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。