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

boyanx5个月前技术教程29

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

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

什么叫跨域?非同源请求,均为跨域。名词解释:同源 —— 如果两个页面拥有相同的协议(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年成为国际标准。所有浏览器都已经支持了。它的最大特点就是,服务器可以主动向客户端推送...

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

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

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

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

基于Vue.js的http网站如何实现帐号密码加密传输?

背景现在大部分网站都采用 https 协议来传输数据,客户端和服务端自动通过证书完成密钥协商和数据加密传输的过程。但是,https 证书一般都是要收费的,因此有些网站开发时还会直接使用 http 协议...

Vue实现原理(图文讲解)(vue 实现原理)

本文章转自:乐字节文章主要讲解:Vue实现原理获取更多VUE相关资料及项目可以关注:B站 小王学Java1、Vue简介现在的大前端时代,是一个动荡纷争的时代,江湖中已经分成了很多门派,主要以Vue,R...

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

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

发表评论    

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