当前位置:首页 > 技术文章 > 正文内容

vue 如何实现跨域(vue如何处理跨域)

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

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

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

相关文章

细数5款国外热门Linux发行版(linux发行版排名网站)

Linux系统已经与我们的生活息息相关,当你用Android手机浏览这篇文章时,你就已经在使用Linux系统。当然作为编程开发最热门的系统,他还有很多专注于开发使用的版本。Fedora热门入门推荐,一...

据说是可以替代 Windows 的 5个 Linux 发行版

现如今有数以千计的 Linux 发行版可供您使用,然而人们却无法选择一个完美的操作系统来替代 Windows。 使用 Windows 时,傻瓜都能操作自如,同样的方法却不适用于 Linux。在这里,您...

Vue3 如何实现父子组件传值?(vue父子组件传值props)

在Vue 3中,要实现父子组件传值效果主要通过props和emit两种机制来实现,下面我们就来详细介绍一下这两种机制。父组件向子组件传值propsprops是Vue组件的一种机制,主要的作用就是实现从...

Vue3开发极简入门(15.1):emits补完-结合v-model

之前代码是通过按钮触发emit,如果希望输入框里的内容在输入之后也能同步到父组件,就可以结合v-model的update事件来操作,具体如下。Son2.vue:<template>...

快速上手React(快速上手的高级表达)

web前端三大主流框架1、Angular大家眼里比较牛的框架,甚至有人说三大框架中只有它能称得上一个完整的框架,因为它包含的东西比较完善,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等...

「 VUE3 + TS + Vite 」父子组件间如何通信?

组件之间传值,大家都很熟悉,涉及到 VUE3 +TS 好多同学就无从下手了,所以分享这篇文章,希望看完后提起 VUE3+TS 能够不慌不忙。平时使用的函数如:ref、reactive、watch、co...