webpack+vue-cil 中proxyTable配置介面地址代理

龍恩0707發表於2017-12-17
WebVue

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 刪掉。

相關文章