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

vue 如何实现跨域

arlanguage4个月前 (12-26)技术文章31

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

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

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

扫描二维码推送至手机访问。

版权声明:本文由AR编程网发布,如需转载请注明出处。

本文链接:http://www.arlanguage.com/post/482.html

分享给朋友:

“vue 如何实现跨域” 的相关文章

从入门到精通nginx——Nginx命令

Nginx命令查看命令选项:nginx -h启动命令:nginx -c file停止命令:nginx -s stop/quit平滑重启命令:nginx -s reload测试配置文件命令:nginx -tq??nginx -t:测试配置文件是否正确,默认只测试默认的配置文件conf/nginx.co...

Linux服务器Centos7系统Nginx安装与配置

一 安装编译工具及库文件yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel二首先要安装 PCREPCRE 作用是让 Nginx 支持 Rewrite 功能。2.1 下载 PCRE 安装包cd /usr/...

给你的Nginx加个防火墙

引言朋友的一个 WordPress 站经常访问慢。看了一下日志,发现整天被扫描网站目录,如phpmyadmin 或者 SQL 文件,和被 CC攻击。找了一下,发现 ngx_lua_waf 是个不错的方案,但是太久不更新了,而且代码我看不懂,猝最后找到 oneinstack 一键包内置的 ngx_lu...

面试常问知识点:Nginx设置代理的一个注意点

前几天,重启了下Nginx代理服务,发现报错了,以下是本次的思考。1:先解决问题查看Nginx错误日志:40 SSL_do_handshake() failed (SSL: error:14094410:SSL routines:ssl3_read_bytes:sslv3 alert handsha...

网站nginx配置限制单个IP访问频率,预防DDOS恶意攻击

一、简介对于网站来说,尤其是流量较大出名的网站,经常遇到攻击,如DDOS攻击等,虽然有些第三方,如Cloudflare可以挡,但对于动态网站PHP来说,只能挡一部分。这时候需要对于单个IP恶意攻击做出限流。nginx的两个模块可以限流。nginx两个限流模块:连接频率限制,ngx_http_lim...

提升网站性能开发的10个技巧 提升网站性能开发的10个技巧是什么

随着网络的高速发展,网络性能的持续提高成为能否在芸芸App中脱颖而出的关键。高度联结的世界意味着用户对网络体验提出了更严苛的要求。假如你的网站不能做到快速响应,又或你的App存在延迟,用户很快就会移情你的竞争对手。以下为大家总结10条有关性能提升的经验,以供参考:1. 采用反向代理服务器(Rever...