vue.config.js 配置proxy代理axios请求无效问题解决方案

最新推荐文章于 2025-06-26 17:35:27 发布

原创最新推荐文章于 2025-06-26 17:35:27 发布 · 1.5w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #代理 #跨域

Vue 专栏收录该内容

30 篇文章

订阅专栏

本文介绍两种Vue项目中配置代理的方法，一种为精简版仅指定代理目标，另一种为标准版详细配置代理规则。通过这些配置可以有效解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用proxy代理请求地址，可以帮助隐藏http请求地址，并可解决跨域请求的问题

方案一：

vue.config.js配置（精简版）(不要配置其他多余的选项，只要proxy)

devServer: {
    port: 8088,
    proxy:"http://192.168.111.101:8081"
    // 下方配置无效，已屏蔽
    /* proxy: {
      '/api': {
        target: "http://192.168.111.101:8081",
        ws: true,
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    } */
}

因vue.config.js已配置了代理，开发环境env.development的target设置为空''，axios是使用env.文件中的target作为baseURL的。

方案二：

vue.config.js配置（标准版）

devServer: {
    port: 8088,
    proxy: {
      '/api': {
        target: "http://192.168.111.101:8081",
        ws: true,
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
}

因vue.config.js已配置了代理，开发环境env.development的target设置为空'/api'，axios是使用env.文件中的target作为baseURL的。

请求路径会多一个/api，并不影响请求数据，因已代理处理。