Vue.js出现跨域拦截报错，配置vue.config.js代理不生效如何解决？

配置失效的核心原因 #

你当前的devServer.proxy配置值为前端项目自身的运行地址http://localhost:8080/，而代理配置的目标应该是你需要调用的后端接口服务地址，指向自身地址自然无法解决跨域问题。

正确配置流程 #

1. 确认后端服务地址 #

提前确认你要调用的后端接口的根地址，示例中假设后端服务运行在http://localhost:3000/，配置时替换为你实际的后端地址即可。

2. 更新vue.config.js配置 #

推荐使用路径匹配的精细化代理规则，避免静态资源被误代理，配置参考如下：

module.exports = {
  devServer: {
    proxy: {
      // 匹配所有以/api为前缀的请求，可替换为你后端接口的统一前缀
      '/api': {
        target: 'http://localhost:3000/', // 替换为实际的后端服务地址
        changeOrigin: true, // 开启跨域
        pathRewrite: {
          // 若后端接口没有/api前缀，可添加该规则移除请求路径中的/api
          '^/api': ''
        }
      }
    }
  }
}

3. 重启开发服务 #

修改vue.config.js后必须重启Vue本地开发服务，新配置才会生效。

4. 调整前端请求路径 #

所有需要走代理的接口，请求地址改为带配置的前缀即可，比如原本要请求http://localhost:3000/user/info，现在直接写/api/user/info，开发服务器会自动将请求转发到后端地址。

生产环境注意事项 #

上述代理配置仅在本地开发环境生效，生产环境的跨域问题需要通过后端配置CORS响应头，或者使用Nginx反向代理处理。

内容的提问来源于stack exchange，提问作者Jon