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

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

zonemu3个月前 (07-14)技术文章28

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

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

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

相关文章

Vue3 中有哪些值得深究的知识点?(vue3例子)

众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!1、createAppvue2 和 vue3 在创建实例时,...

程序员项目经理如何调动组员积极性

#这个方法应该很适合程序员都说程序员是比较傲娇,有点小自负(有的是相当,那不叫自负,那是实力的体现好吗),略微呆萌,自尊心偏小强的一类族群。是吗?中招了吗?作为管理好几个组员,要完成一个大项目的项目经...

如何使用git clone克隆包含子模块的仓库

技术背景在软件开发中,当项目规模逐渐增大时,为了更好地管理代码,我们常常会使用子模块将项目拆分成多个独立的部分。Git 作为目前最流行的版本控制系统,提供了管理子模块的功能。但在克隆包含子模块的仓库时...

HTML5设计与制作哪家强?全省50多所高职院校齐聚中山比拼

3月22日下午,2018-2019年广东省职业院校学生专业技能大赛“HTML5交互融媒体内容设计与制作”赛项在中山火炬职业技术学院开幕。全省51所高职院校的52支参赛队伍参加此次大赛。参赛师生将于3月...

最快认知什么才是HTML5广告!(h5广告设计是什么)

H5广告似乎是自UI风靡之后,又一个热度极高的词儿。他是什么?一个字母加一个数字是个什么意思? 为什么如此受欢迎?金色号角会议室,创作事业部赵阳同学就HTML5广告做了详尽生动的分享,带大家一起用手机...

最快清除数组空值?分享 1 段优质 JS 代码片段!

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!大家好,我是大澈!本文约 600+ 字,整篇阅读约需 1 分钟。今天分享一段优质 JS 代码片段,用最简洁的代码清除了数组中的...