本文共 1451 字，大约阅读时间需要 4 分钟。

当vue项目里，前端发送ajax请求后台数据的时候，由于前后端服务器地址的不同，导致请求发生跨域问题，错误如下图：

1. 在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      }    }  }}

2. 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)    })}

转载地址：http://wqyrf.baihongyu.com/