// vue.config.js
module.exports = {devServer: {proxy: {'/dev-api': {target: 'http://localhost:3000', // 后端 API 地址changeOrigin: true, // 是否修改请求头中的 Origin 字段pathRewrite: {'^/dev-api': '' // 将请求路径中的 /dev-api 前缀去掉}}}}
}
-
target：后端服务器的地址。 -
changeOrigin：将请求头中的Origin字段修改为目标地址（有时后端会根据Origin来判断请求是否合法）。 -
pathRewrite：将请求路径中的/dev-api前缀去掉。例如，前端请求/dev-api/user时，代理会将其转发到http://localhost:3000/user。
请求示例：
-
本地 Vue 请求：
http://localhost:8080/dev-api/user -
实际请求会被代理到：
http://localhost:3000/user
这种方式使得你在开发过程中不需要修改前端代码中的 API 地址，同时也避免了跨域问题。
总结：
-
通过配置代理，前端可以透明地请求后端服务，而不受同源策略限制。
-
dev-api只是一个用来区分代理请求的前缀，你可以根据需求修改为任何合适的路径前缀。