vue解决浏览器跨域，设置代理服务器

跨域本质是浏览器基于同源策略的一种安全手段

同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能

所谓同源（即指在同一个域）具有以下三个相同点

协议相同（protocol）

主机相同（host）

端口相同（port）

反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域

代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全，防止攻击

方案一

如果是通过​<code>​vue-cli​</code>​脚手架工具搭建项目，我们可以通过​<code>​webpack​</code>​为我们起一个本地服务器作为请求的代理对象

通过该服务器转发请求至目标服务器，得到结果再转发给前端，但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域

在​<code>​vue.config.js​</code>​文件，新增以下代码

如果是vite创建的项目在vite.config.js新增以下代码

通过​<code>​axios​</code>​发送请求中，配置请求的根路径

方案二

此外，还可通过服务端实现代理请求转发

以​<code>​express​</code>​框架为例

方案三

通过配置​<code>​nginx​</code>​实现代理

真正的大师，永远都怀着一颗学徒的心