webpack+vue-cil 中proxyTable配置接口地址代理

webpack+vue-cil 中proxyTable配置接口地址代理

    在項目開發的時候，接口聯調的時候通常都是同域名下，且不存在跨域的狀況下進行接口聯調，可是當咱們如今使用vue-cli進行項目打包的時候，咱們在本地啓動服務器後，好比本地開發服務下是 http://localhost:8080 這樣的訪問頁面，可是咱們的接口地址是 http://xxxx.com/save/index 這樣的接口地址，咱們這樣直接使用會存在跨域的請求，致使接口請求不成功，所以咱們須要在打包的時候配置一下，咱們進入 config/index.js 代碼下以下配置便可：

dev: {

    // 靜態資源文件夾
    assetsSubDirectory: 'static',

    // 發佈路徑
    assetsPublicPath: '/',

    // 代理配置表，在這裏能夠配置特定的請求代理到對應的API接口
    // 例如將'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
    // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
    proxyTable: {
      '/api': {
        target: 'http://xxxxxx.com', // 接口的域名
        // secure: false,  // 若是是https接口，須要配置這個參數
        changeOrigin: true, // 若是接口跨域，須要進行這個參數配置
        pathRewrite: {
          '^/api': ''
        }
      }
    },

    // 本地訪問 http://localhost:8080
    host: 'localhost', // can be overwritten by process.env.HOST

接口地址本來是 /save/index，可是爲了匹配代理地址，在前面加一個 /api,  所以接口地址須要寫成這樣的便可生效 /api/save/index。

注意： '/api' 爲匹配項，target 爲被請求的地址，由於在 ajax 的 url 中加了前綴 '/api'，而本來的接口是沒有這個前綴的，因此須要經過 pathRewrite 來重寫地址，將前綴 '/api' 轉爲 '/'。若是自己的接口地址就有 '/api' 這種通用前綴，就能夠把 pathRewrite 刪掉。