vue-cli如何配置devServer代理将全路径API请求转发到开发服务

云原生阿岚

2026-10-3

解决方案

配置失效原因

devServer.proxy 仅匹配本地请求的路径前缀，你之前的配置直接在axios请求里写了完整的外部接口域名，浏览器会直接发起跨域请求，不会经过本地开发服务转发，因此代理规则完全没有触发，才会出现CORS报错。

正确配置步骤

第一步：保留路径前缀匹配的代理规则

vue.config.js 里的devServer配置不需要写完整域名，还是保留原有的路径前缀匹配逻辑即可：

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost/my-project-api', // 本地开发环境的后端服务地址
            changeOrigin: true,
            pathRewrite: {
                "^/api": ""
            }
        }
    }
}

第二步：用环境变量区分开发/生产的接口前缀

不要在axios请求里硬写完整域名，通过vue-cli的环境变量自动适配不同环境的接口地址：

在项目根目录的.env.development文件中添加配置：

VUE_APP_API_BASE_URL = '/api'

在项目根目录的.env.production文件中添加配置：

VUE_APP_API_BASE_URL = 'https://api.mydomain.com'

调整axios请求写法，动态拼接接口前缀：

axios({
    method: "get",
    url: `${process.env.VUE_APP_API_BASE_URL}/endpoint/`,
    headers: {
        "Content-Type": "application/json;charset=UTF-8"
    },
    responseType: "json"
})
.then((response) => {
    resolve(response.data);
})
.catch((error) => {
    reject(error);
});