记录：Vue 构建前端项目，在本地开发时通常会使用代理来转发请求，避免跨域请求问题
// 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只是一个用来区分代理请求的前缀，你可以根据需求修改为任何合适的路径前缀。