vue反向代理使用

Vue项目解决跨域问题：配置反向代理

最新推荐文章于 2025-10-12 13:23:24 发布

原创最新推荐文章于 2025-10-12 13:23:24 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在Vue项目中遇到跨域问题时，如何通过设置反向代理来解决。具体步骤包括在vue.config.js中配置devServer的proxy选项，设定代理路径和目标后台服务器地址，以及启用changeOrigin选项。示例代码展示了针对不同接口路径的两种代理配置，并提供了在js中使用代理请求数据的方法。

当vue项目里，前端发送ajax请求后台数据的时候，由于前后端服务器地址的不同，导致请求发生跨域问题，错误如下图：
在这里插入图片描述
为了解决跨域问题，可在vue项目中设置反向代理，从而保证前端能顺利请求后端数据。
反向代理配置如下：

在package.json文件同级目录下新建一个vue.config.js，并将如下代码放入vue.config.js中。

// vue的配置文件， 修改重启服务器
module.exports = {
  // 对于当前开发服务器配置反向代理
  devServer: {
    proxy: { // 一个proxy下可以配置多个代理，下面就配置了两个代理。代理目录分别为/kervin,/ajax
      '/kerwin': { // /kerwin为代理目录 
        target: 'https://m.maoyan.com', // https://m.maoyan.com 为后台服务器域名或ip地址
        changeOrigin: true,
        //pathRewrite对请求路径进行重定向以匹配到正确的请求地址
        // 假设页面路由配置 /kervin/movieOnInfoList?token=&aaa
        // 解析后的地址为 https://m.maoyan.com/ajax/movieOnInfoList?token=&aaa
        pathRewrite: {
          '^/kerwin': '/ajax' //路由里的地址匹配 ： 替换后的地址
        }
      },
      // 解析后的请求地址：target后配置的地址/代理目录
      // 假设页面路由配置 ajax/movieOnInfoList?token=&aaa
      // 解析后的地址为 https://m.maoyan.com/ajax/movieOnInfoList?token=&aaa
      '/ajax': {
        target: 'https://m.maoyan.com',
        changeOrigin: true
      }
    }
  }
}

js里使用反向代理

mounted () {
    axios.get('/kerwin/movieOnInfoList?token=&optimus_uuid=840641A09D2711EBBAEFDF7172CF0F5FC3DD4F7550754A5D83394257B26BFECF&optimus_risk_level=71&optimus_code=10').then(res => {
      console.log(res.data)
    })
}

// 或者
mounted () {
    axios.get('/ajax/movieOnInfoList?token=&optimus_uuid=840641A09D2711EBBAEFDF7172CF0F5FC3DD4F7550754A5D83394257B26BFECF&optimus_risk_level=71&optimus_code=10').then(res => {
      console.log(res.data)
    })
}