Vue CLI项目需在vue.config.js中正确配置devServer.proxy，target须带协议和端口、changeOrigin:true必开；Vite项目应改vite.config.ts的server.proxy；务必确保npm脚本为serve且axios baseURL设为"/"或空，避免硬编码域名。
WebStorm 里 vue.config.js 的 proxy 配置不生效？先确认项目类型
WebStorm 本身不处理跨域，它只是运行你配置好的开发服务器。所以“跨域配置是否生效”，本质是 vue.config.js 是否被正确加载、以及你用的是不是 Vue CLI 项目。Vite 项目根本不用 vue.config.js，它走的是 vite.config.ts 里的 server.proxy。如果你用 Vite 创建的 Vue 3 项目，却在根目录下新建 vue.config.js 写 devServer.proxy，那完全没用——WebStorm 会照常启动，但代理不会挂载。
判断方式很简单：打开 package.json，看 "scripts" 里有没有 "serve": "vue-cli-service serve"。有，才是 Vue CLI；如果写的是 "dev": "vite"，就别碰 vue.config.js 了。
- Vue CLI 项目 → 放
vue.config.js在项目根目录，内容必须导出对象（module.exports = { ... }） - Vite 项目 → 改
vite.config.ts的server.proxy字段，格式是 Record<string, string | ProxyOptions> - WebStorm 不会自动识别或校验这些文件是否存在，也不会提示你“你配错了”，它只负责调起 npm 脚本
proxy 配置写对了，但请求还是 404 或直接发到 localhost？检查 target 和 changeOrigin
常见错误是 target 少了协议或端口，比如写成 target: 'http://127.0.0.1'（缺 :8080），或者写成 target: 'localhost:8080'（缺 http://）。浏览器发起的请求会被 Webpack Dev Server 拦截，但它转发时若 URL 格式非法，就会静默失败，控制台可能只显示 Proxy error: Could not proxy request。
changeOrigin: true 也容易被漏掉。它作用是把请求头里的 Host 改成 target 的域名，否则后端（尤其是 Spring Boot）可能因 Host 不匹配直接拒收。
立即学习“前端免费学习笔记（深入）”；
-
target必须带协议（http://或https://）和端口（如:8080） -
changeOrigin: true在绝大多数本地联调场景下都应开启 - 如果后端启用了 HTTPS，且证书非受信，加
secure: false，否则代理会拒绝连接 - 路径重写
pathRewrite是可选的，但^/api必须用正则写法，不能写成/api
WebStorm 启动后页面能打开，但 Network 里请求仍是直连后端？确认运行的是 proxy 脚本
很多人在 WebStorm 里点绿色三角运行，结果发现请求没走代理，是因为没选对 npm 脚本。Vue CLI 项目默认提供 serve 脚本，但如果你手动改过 package.json，比如删掉了 serve、只留了 dev，而 WebStorm 运行配置里还固定绑着 serve，那它实际执行的可能是另一个没配 proxy 的命令（比如直接 npm run dev 启动了一个无代理的 Express 服务）。
进 Edit Configurations 看一眼：Scripts 下拉框里选中的是不是你 package.json 中真正配了 proxy 的那个脚本？如果是 Vue CLI，它必须是 serve；如果是自定义的，比如叫 dev:proxy，就得手动选它，不能靠默认值。
- 右上角 “Add Configuration” → “+” → “npm” →
Scripts下拉选中你配了 proxy 的那个 script 名 - 别信“默认运行 dev”，WebStorm 没这个逻辑，它只按你配置的来
- 运行后看终端第一行输出：如果是 Vue CLI，应含
Starting development server...；如果是 Vite，应含vite v版本号和Local:地址
前端发请求时写了 /api，但后端收不到？检查 axios baseURL 和请求路径拼接
代理只管 HTTP 层的转发，不管 JS 代码里怎么拼 URL。很多人配好了 proxy: { '/api': { target: 'http://127.0.0.1:8080' } }，但在代码里却写 axios.get('/api/user/info') —— 这没问题；但如果写成 axios.get('http://127.0.0.1:8080/api/user/info')，那就绕过了代理，直接跨域了。
更隐蔽的问题是 axios.create 里设了 baseURL。比如你写了 baseURL: 'http://127.0.0.1:8080'，那 axios.get('/api/user') 实际发的就是 http://127.0.0.1:8080/api/user，又绕过了 proxy。
- 代理生效的前提：请求 URL 是相对路径，且以代理前缀开头（如
/api/xxx） - 禁用任何硬编码的
http://或https://前缀 - 检查所有
axios.create配置，baseURL应为空或/，不要填完整地址 - 如果用了
withCredentials: true，后端必须返回Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能为*
跨域配置最易错的不是语法，而是环境错位：Vite 项目去配 vue.config.js，Vue CLI 项目却用 Vite 启动，或者脚本名对不上、baseURL 写死地址。这些地方一错，WebStorm 界面看着一切正常，但 Network 里全是红叉。
