vue的跨域方式

Posted 2023-03-15

参考技术A 如果搜素vue的跨域，大概率找到的是介绍配置的方法，然后介绍啥是跨域，blablablla。看了半天呢，还是很茫然。到底怎么跨域？

可能对于圈子里面人来说，跨域没啥好说的，告诉你配置方式不就完事了吗？还需要啥自行车？

但是对于新手，或者从其他地方转过来的就会比较懵逼。。。

以前一般用ajax 的 jsonp 来跨域，这个简单，前端基本不用改啥，后端配合一下就好，简单易懂。

后来出现了 CROS，这个麻烦一点，前端要各种配置，后端也要各种配合。
虽然一开始弄的时候容易报错，但是折腾折腾也就可以调通了。

但是到了 vue 却比较茫然，因为默认的跨域方式改成了代理的方式。

代理是啥呢？简单的说，浏览器直接访问其他网站，这是跨域，不行滴，那么怎么办呢？可以找个代理呀。

浏览器先访问自己的服务端（假设叫做A），然后再让A去访问后端API，这样就不是跨域了。A就实现了代理功能。

我们用脚手架建好项目，然后运行的时候，默认就带上了这个代理的功能，所以我们配置好就可以实现跨域了，后端API也不用做配合，（只要不封IP地址就好）。

vite也支持代理的功能，所以也是一样，做好配置就可以用了。

上线后可以用nginx，也是支持代理的。

只是有点小问题，多占用一个服务器。

以vite2建立的项目为例，介绍一下：

这样就好了。

然后可以用axios来访问。

然后可以得到数据：

data属性是后端API返回的数据，
status 是后端API返回的状态，
还有其他的一些信息，方便我们做判断。