vue proxyTable 接口跨域請求調(diào)試

在不同域之間訪問是比較常見，在本地調(diào)試訪問遠(yuǎn)程服務(wù)器。。。。這就是有域問題。

比如本地開發(fā)服務(wù)下是 http://localhost:8080 這樣的訪問頁面，但是我們的接口地址是 http://xxxx.com/save/index 這樣的接口地址，我們這樣直接使用會存在跨域的請求，導(dǎo)致接口請求不成功

VUE解決通過proxyTable:

在 config/index.js 配置文件中

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    cssSourceMap: false
  }

需要更改的是 proxyTable 字段

    proxyTable: {
      '/api': {
        target: 'http://xxxxxx.com', // 接口的域名
        // secure: false,  // 如果是https接口，需要配置這個參數(shù)
        changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個參數(shù)配置
        pathRewrite: {
          '^/api': ''       // 把 /api 開頭的路徑替換為 ''
        }
      }
    },

接口地址原本是 /save/index，但是為了匹配代理地址，在前面加一個 /api, 因此接口地址需要寫成這樣的即可生效 /api/save/index。

注意： '/api' 為匹配項，target 為被請求的地址，因為在 ajax 的 url 中加了前綴 '/api'，而原本的接口是沒有這個前綴的，所以需要通過 pathRewrite 來重寫地址，將前綴 '/api' 轉(zhuǎn)為 '/'。如果本身的接口地址就有 '/api' 這種通用前綴，就可以把 pathRewrite 刪掉