Vue全家桶开发系列：通过设置webpack的proxyTable实现跨域请求

在使用Vue开发项目时，因为前后端分离，经常遇到跨域请求的问题，通用的方法是在后端设置Access-Control-Allow-Origin: *。但在某些特殊情况下，这个方式并不适用，这种时候，可以通过设置webpack的proxyTable进行解决（仅限于开发环境）。

代理设置

使用vue-cli创建的项目中，可以看到config/index.js文件中，proxyTable默认为空：

首先使用一些免费的API进行测试：https://github.com/jokermonn/-Api

设置如下：

proxyTable: {
   '/article/today': { //访问路由
        target: 'https://interface.meiriyiwen.com', //目标接口域名
        secure: false, //https协议才设置
        changeOrigin: true, //是否跨域
   }        
}

使用axios进行请求：

import axios from 'axios';
export default {
  name: 'App',
  mounted(){
    this.getInfos();
  },
  methods:{
    getInfos() {
      axios.get('/article/today').then((res)=>{
        console.log(res);
      })
    }
  }
}

然而，请求失败了，报404错误！这个时候，只需要重新执行 npm run dev 即可！

这次，请求成功了，本地访问 http://localhost:8081/article/today 其实就是代理访问了https://interface.meiriyiwen.com/article/today

地址重写

现在有个问题，想要把这个请求地址写成“/api”开头，怎么办？

设置如下：

proxyTable: {
   '/api': { //访问路由
        target: 'https://interface.meiriyiwen.com', //目标接口域名
        secure: false, //https协议才设置
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api/article': '/article/today' //重写接口
        },
   }        
}

axios请求更改如下：

axios.get('/api/article').then((res)=>{
   console.log(res);
})

访问成功了：

多项代理

如果想设置多个代理，proxyTable可以这样设置：

proxyTable: {
      '/api': { //访问路由 /api 触发
        target: 'https://interface.meiriyiwen.com', //目标接口域名
        secure: false, //https协议才设置
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api/article': '/article/today' //重写接口
        },
      },
      '/movie' : {  //访问路由 /movie 触发
          target: 'https://api.douban.com', 
          secure: false,
          changeOrigin: true, //是否跨域
          pathRewrite: {
            '^/movie': '/v2/movie/in_theaters' //原接口地址太长了，重写可以缩短些 
          }     
      }       
}

Axios请求如下：

//实际访问地址为：https://interface.meiriyiwen.com/article/today
axios.get('/api/article').then((res)=>{
   console.log(res);
});

//实际访问地址为：https://api.douban.com/v2/movie/in_theaters
axios.get('/movie').then((res)=>{
   console.log(res);
});

没错，相信你的眼睛，请求成功了！

 

转载于:https://my.oschina.net/ximidao/blog/2875800