跨域问题及Vue项目中本地/线上解决方法核心总结

1做开发服务器代理

// 动态匹配规则：匹配所有以「环境变量API_KEY」为前缀的请求 $process.env.VUE_APP_API_KEY$ : { // 1. 转发的目标后端服务器地址（真实接口所在的域名）

target: process.env.VUE_APP_BASE_URL, // 2. 跨域核心：伪装请求来源，让后端以为是同域请求 changeOrigin: true,

// 3. 路径重写：去掉请求路径中开头的API_KEY前缀，

pathRewrite: { $\`\^${process.env.VUE_APP_API_KEY}\`$ : "", }, },

用开发服务器代理的方式去读env里的变量，

3不能在创建请求实例的时候用baseURL,去放env里的变量，因为直接放会跨域，那里需要用代理的开发服务器读取，env里的变量存的一般是目标服务器

2 代理流程

先给所有的请求配置了api

然后在config.js里设置了代理

4什么是跨域，怎莫解决跨域

跨域问题的核心是浏览器的同源策略，即协议、域名、端口三者不一致时，前端直接请求后端接口会被拦截，代理服务器是解决跨域的核心方案，核心原理是让代理服务器与前端项目地址同源，绕开浏览器的同源校验，再由代理服务器转发请求到真实后端接口（服务器间请求不受同源策略限制）。

代理服务器是解决前端跨域的核心方案，核心原理是让代理服务器地址与浏览器中前端项目地址保持同源，绕开浏览器同源策略拦截；前端先请求同源的代理服务器，再由代理服务器转发请求到真实后端接口（服务器间请求不受同源策略限制），以此实现跨域通信。

代理的配置分本地开发环境和生产部署环境，配置主体和方式完全不同：本地开发时，由前端自己在vue-cli/Vite中配置proxy本地代理，仅用于开发阶段；项目打包部署后，不再使用本地proxy，而是由后端/运维在Nginx/Apache等服务器上配置反向代理，该配置属于服务器层面操作，与前端代码无关，且前后端需提前协商确认代理的关键信息（接口前缀、真实后端地址等），避免配置错误导致请求失败。

生产环境配置服务器反向代理时，前端需将生产环境的接口相关信息告知后端/运维，同时要自行通过env环境文件配置不同环境的baseURL，实现开发和生产的请求基准地址区分，这里核心要明确几个关键概念和配置逻辑：

baseURL并非接口基础路径，而是**目标服务器地址+接口基础路径（接口公共前缀）**的组合体，其中 /api 这类接口基础路径（也叫接口公共前缀）是固定不变的，仅用于标识接口、让代理精准捕获；
本地开发环境的baseURL，会直接拼接后端真实的服务器地址，适配前端本地proxy的转发规则；生产环境的baseURL则省略后端服务器地址，只保留 /api 这类基础路径，适配服务器端的反向代理规则；
所谓部署后baseURL的"基础路径变化"，本质是baseURL是否拼接后端服务器地址的变化，而非 /api 这个基础路径本身改变，且该变化是前端在 .env.development （开发）和 .env.production （生产）文件中自行配置的，项目打包时会自动加载对应环境的baseURL，无需手动修改代码。

简单来说，开发和生产环境的baseURL配置变化，是前端为了匹配不同阶段的代理规则自行设置的，全程仅需前端将协商好的生产环境配置信息告知后端/运维，由对方完成服务器端反向代理配置即可，且接口基础路径（ /api ）全程固定，与assets静态资源的基础路径无任何关联，仅作用于接口请求环节。

5总结

跨域问题及Vue项目中本地/线上解决方法核心总结

跨域问题仅会在浏览器中出现，根源是浏览器的同源策略：浏览器地址由协议、域名、端口三部分组成，两个网址只要其中任意一部分不一致，就不满足同源策略，从A地址请求B地址的资源时，就会触发跨域问题。

一、Vue项目本地开发环境（本地）：配置本地代理服务器解决跨域

本地开发时会启动本地代理服务器（dev server），该服务器与本地Vue项目的地址完全遵循同源策略，以此绕开浏览器的跨域拦截，核心实现逻辑：

给Vue项目中axios的所有请求地址统一添加请求前缀（如 /api ）；
在dev server的 proxy 中配置规则，拦截所有以该前缀开头的网络请求；
将拦截到的请求代理转发到真实的远端目标服务器，并把请求前缀重写为空串；
由本地代理服务器请求远端服务器的资源，再将结果返回给本地项目，实现跨域请求。

关键：dev server（本地代理服务器）运行在本地，和本地项目地址同源，因此不会触发跨域，要明确区分本地服务器（代理用）和远端服务器（真实请求目标）。

二、Vue项目线上生产环境（部署后）：Nginx配置反向代理解决跨域

线上跨域的解决思路和本地完全一致，通过Nginx配置反向代理实现，核心逻辑与本地proxy代理一致：通过Nginx拦截指定前缀的请求，转发到真实后端服务器，本质也是利用中间层（Nginx）实现同源请求转发，规避浏览器跨域限制。