Vue3代理设置详探，揭秘是否经过服务器及配置技巧

Vue代理是否经过服务器

1、在使用Vite进行Vue项目开发时，可以通过配置proxy来实现对多个服务器的代理，Vite的server.proxy配置项支持多种写法，包括字符串简写、选项写法、正则表达式写法以及proxy实例方法，若仅需代理一个服务器，使用字符串简写方式即可方便快捷地设置代理。

2、Vue项目的配置文件通常是vue.config.js或vue.js，在这些文件中可以找到devServer属性，在此属性下，可以设置api作为请求URL的前缀名，target指定代理到的后端服务器地址，changeOrigin决定是否支持跨域请求，pathRewrite则用于将URL中的/api前缀替换为空，完成配置后，还需在Vue组件中相应地进行设置。

3、在Node.js后端创建代理服务器时，http-proxy-middleware会根据配置信息，在接收到客户端请求时将其转发至代理服务器，代理服务器再向目标跨域服务器发起请求，获取响应数据后转发给客户端，通过在Vue中使用Node.js设置代理，可以有效解决跨域问题。

Vue跨域请求详解（Vue跨域请求原理）

1、跨域请求的配置步骤如下：在vue.config.js文件中，利用proxy配置项为需要跨域的接口设置代理规则，可以为接口路径`/abc`配置代理规则，指定目标服务器地址`target`和路径重写规则`pathRewrite`，从而实现前端请求的代理转发。

2、Vue CLI3项目中解决跨域问题的关键在于前后端分离，前端Vue.js应用与后端服务器各自独立开发，并通过API接口进行通信，这种方式使得前端无需直接访问后端数据，绕过了同源策略的限制，前端通过AJAX或Fetch API向后端发起请求，后端提供相应的API接口。

3、Vue.js项目使用http-proxy-middleware解决跨域请求问题：若后端提供的接口为https://stg-pteppp.leanapp.cn/h5/jsconfig，前端在本地开发时调用该接口会跨域，解决方案是在webpack配置中设置proxy，确保target指向正确的域名，并添加http协议。

4、若已设置跨域但仍然存在问题，可以检查后台支持的编码格式是否与前端的axios发送的编码格式一致，不一致可能导致跨域问题，解决方法是使用qs库将请求参数转换为正确的编码格式，具体操作为：使用npm安装qs库，并在发送请求前使用qs.stringify()方法转换参数编码。

Vue配置的代理上线后是否还生效

1、在vue.config.js中，通过添加devServer对象并设置proxy属性，可以实现请求的路由转发，将请求定向至http://localhost:3000/api，而非直接发送到本地开发服务器，开发者可以利用代理功能模拟不同的环境，如将请求转发到本地的Mock服务器或测试环境。

2、通常在开发Vue项目时，我们会配置接口代理，例如将所有以/API开头的请求代理到本机的3000端口，但需要注意的是，这种配置仅在本地开发时有效，打包后不会起作用，若要解决线上环境的代理问题，可以确保后端服务（如Node.js）与前端部署在同一个服务器上。

3、有时即使配置看似正确，但实际上并未生效，原因可能在于F12开发者工具中看到的请求实际上发送给了本地的临时服务器，再由该服务器转发给远程服务器，这种现象可能由于某些配置或服务器设置导致。

ViteVueProxy线上使用方法

1、在线上环境中使用ViteVueProxy，首先需要安装相关依赖，并在vite.config.ts文件中进行配置，在src目录下创建styles文件夹，并在其中创建variables.scss文件，定义所需的变量，在Vue文件中，可以直接引用这些变量。

2、了解css.preprocessorOptions配置项，它用于传递给CSS预处理器的配置选项，在SCSS中定义的全局变量可以通过这一配置进行管理，可以创建一个全局变量文件，并在.scss文件或.vue文件中引入，以便在这些文件中使用这些变量。

3、ViteVueProxy的线上使用方法与开发环境中类似：通过Vite的server.proxy配置自定义代理规则，支持多种写法，根据项目需求，选择合适的代理配置方式，以实现线上环境的代理需求。