Vue全家桶開發系列：經過設置webpack的proxyTable實現跨域請求

在使用Vue開發項目時，由於先後端分離，常常遇到跨域請求的問題，通用的方法是在後端設置Access-Control-Allow-Origin:*。但在某些特殊狀況下，這個方式並不適用，這種時候，能夠經過設置webpack的proxyTable進行解決（僅限於開發環境）。

代理設置

使用vue-cli建立的項目中，能夠看到config/index.js文件中，proxyTable默認爲空：

首先使用一些免費的API進行測試：https://github.com/jokermonn/...

設置以下：

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....

重寫地址

如今有個問題，想要把這個請求地址寫成「/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);
});

沒錯，相信你的眼睛，請求成功了！