vue设置代理不起作用解决办法

最新推荐文章于 2025-06-27 17:36:32 发布

原创最新推荐文章于 2025-06-27 17:36:32 发布 · 7.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

错误笔记专栏收录该内容

9 篇文章

订阅专栏

本文指导如何在Vue项目中通过配置proxyTable解决AJAX跨域问题，重点讲解了正确的代理路径设置，以及重启应用的必要性。

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

使用vue写前端界面时，需调用后端接口展现查询的数据，于是设置代理实现跨域，在config/index.js中添加代理，代码如下：

proxyTable:{
      // 匹配 /dev-api 开头的请求， 比如：A网站：https://localhost:8888 中的index.html 页面发送AJax请求：/dev-api/data.json
      'dev-api': {
        target:'http://localhost:3001',
        // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，
        // 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        changOrigin: true, //开启代理
        pathRewrite: {
            "^/dev-api": ''
        }
      }
    },

运行后发现报错404：
在这里插入图片描述
测试后端接口无问题，着重看代理部分代码，百度后发现 “dev-api"前面应加”/"，
否则会出现上述错误。

完整代码如下：

proxyTable:{
      // 匹配 /dev-api 开头的请求， 比如：A网站：https://localhost:8888 中的index.html 页面发送AJax请求：/dev-api/data.json
      '/dev-api': {
        target:'http://localhost:3001',
        // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，
        // 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        changOrigin: true, //开启代理
        pathRewrite: {
            "^/dev-api": ''
        }
      }
    },

除此之外，修改代理后应重启一下，否则修改内容不生效。