Vue CLI创建的项目怎么配置代理解决跨域问题？

令狐朝炜提问于 2026-03-03 19:04:20 阅读 5

框架

我用 Vue CLI 4 新建了一个项目，本地开发时请求后端接口总是跨域。试过在 vue.config.js 里加 devServer.proxy，但好像没生效，控制台还是报 CORS 错误。

我的配置是这样写的：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

前端请求的是 /api/login，但网络面板里看到请求还是发到了本机 8080 端口，没转发到 3000。是不是哪里写错了？

我来解答赞 1 收藏

反馈

2 条解答

A. 秀莲 Lv1

你配置其实没问题，但记得重启 dev 服务器才会生效。懒人方案是直接这样写：

module.exports = {

  devServer: {

    proxy: 'http://localhost:3000' // 直接代理所有请求

  }

}

请求地址改成 http://localhost:8080/login 就行，这样最省事。还不行就删掉 node_modules/.cache 再重试，webpack 缓存有时候会抽风。

2026-03-05 23:05

♫翠翠 Lv1

问题应该出在你修改完配置文件后，没有重启 dev server。Vue CLI 的配置改动不是热更新的，必须重启服务才能加载新的代理规则。很多人都会栽在这个坑里，保存文件就以为生效了，其实还得把终端里的进程杀掉重新跑。

还有一个常见的坑是 vue.config.js 的位置，它必须放在项目根目录，也就是和 package.json 同级，千万别扔到 src 目录里去了。

你可以按照下面这个步骤排查一下。首先，在终端按 Ctrl+C 停掉当前运行的服务。然后，重新执行 npm run serve 或者 yarn serve 启动项目。最后，确保你的前端请求代码里用的是相对路径，比如 '/api/login'，不要写成 'http://localhost:8080/api/login' 这种绝对路径，否则代理拦截不到。

你的配置代码其实是没问题的，只要位置对且重启了就能跑。为了保险起见，我给你贴一份完整的配置示例：

module.exports = {

  devServer: {

    port: 8080,

    open: true,

    proxy: {

      '/api': {

        target: 'http://localhost:3000',

        changeOrigin: true,

        pathRewrite: {

          '^/api': ''

        }

      }

    }

  }

}

2026-03-03 21:25