为什么vue设置了axios请求头之后会跨域?
这是需要后端设置响应头的。
跨域是浏览器行为,需要后端允许跨域,才能正常访问,不是在前端设置的。
Vue项目中跨域问题的解决
在Web端Vue项目开发过程中,跨域问题是不可避免的;在我参与的Vue项目中,使用服务器代理的解决方案;针对不同的环境(开发环境/生产环境),采用了不同的服务器代理方案;
服务器代理的原理大概是这样:
代理服务器和访问源(请求端)是同源的,但和被访问服务器(资源端)是不同源的,但服务器之间的访问不受浏览器同源策略的影响(即不必担心是否有跨域问题),那么我们即可请求到同源服务器上的从被访问服务器上的获取到的请求资源了 ;
这样配置完成后,我们发起的每次http请求的Request Url的前面一部分都会和我们本地的源一样;
举例:
我们项目跑在开发环境下的 上,那么上述请求的Request Url的就是 ;这应该就是我们的代理服务器中该资源的地址,与客户端同源;而数据的实际来源则是 ,这样即实现代理跨域;
目前猜测这个代理服务器可能是Node;
nginx 版本: 1.16.1
修改 nginx.conf 文件下的 serve 下配置:
举例:
生产环境下的,我们项目跑Nginx服务器监听的 上,那么上述请求的Request Url的就是 ;
这应该就是我们的代理服务器中该资源的地址,与客户端同源;
而数据的实际来源则是 ,这样即实现代理跨域;
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方法。
vue的跨域方式
如果搜素vue的跨域,大概率找到的是介绍配置的方法,然后介绍啥是跨域,blablablla。看了半天呢,还是很茫然。到底怎么跨域?
可能对于圈子里面人来说,跨域没啥好说的,告诉你配置方式不就完事了吗?还需要啥自行车?
但是对于新手,或者从其他地方转过来的就会比较懵逼。。。
以前一般用ajax 的 jsonp 来跨域,这个简单,前端基本不用改啥,后端配合一下就好,简单易懂。
后来出现了 CROS,这个麻烦一点,前端要各种配置,后端也要各种配合。
虽然一开始弄的时候容易报错,但是折腾折腾也就可以调通了。
但是到了 vue 却比较茫然,因为默认的跨域方式改成了代理的方式。
代理是啥呢?简单的说,浏览器直接访问其他网站,这是跨域,不行滴,那么怎么办呢?可以找个代理呀。
浏览器先访问自己的服务端(假设叫做A),然后再让A去访问后端API,这样就不是跨域了。A就实现了代理功能。
我们用脚手架建好项目,然后运行的时候,默认就带上了这个代理的功能,所以我们配置好就可以实现跨域了,后端API也不用做配合,(只要不封IP地址就好)。
vite也支持代理的功能,所以也是一样,做好配置就可以用了。
上线后可以用nginx,也是支持代理的。
只是有点小问题,多占用一个服务器。
以vite2建立的项目为例,介绍一下:
这样就好了。
然后可以用axios来访问。
然后可以得到数据:
data属性是后端API返回的数据,
status 是后端API返回的状态,
还有其他的一些信息,方便我们做判断。
vue中的代理跨域
在前端中我们用ajax请求数据,有多种方式,大家都知道,跨域的原因是服务和客户端不满足同源测钥,在vue.js中我们只需要设置一种属性:
在vue.config.js配置即可:/hehe,代表你要代理地服务器地址;比如这里代理的是;这个地址;在pathRewrite中表示的是在访问地址时,我们实际上要将这字符给出掉的;changeOrigin如果设置成true:发送请求头中host会设置成target·