原理

vue 中的 proxy 就是利用了 Node 代理，原理還是因為服務(wù)器端沒有跨域這一說嘛，也是用了這么一個插件 地址

一、proxy常用參數(shù)說明

module.exports = {
    publicPath: "/",
    devServer: {
        proxy: {
            "/api": {
                // 代理名稱   凡是使用/api開頭的地址都是用此代理
                target: "http://45.68.4.32:5000/", // 需要代理訪問的api地址
                changeOrigin: true, // 允許跨域請求
                //ws: true,        //如果要代理 websockets，配置這個參數(shù)
                secure: false,  // 如果是https接口，需要配置這個參數(shù)
                pathRewrite: {
                    // 重寫路徑，替換請求地址中的指定路徑
                    "^/api": "/", // 將請求地址中的/api替換為空，也就是請求地址中不會包含/api/
                },
            },
        },
    },
};

二、關(guān)于/api的詳解

‘/api’：是指遇到這個字符開頭的話，在這個字符前面加上target里面的ip或者域名。

舉例：
①登錄接口：http://1.2.3.4:5000/login
…中間省略了配置過程…
②npm run serve:Local: http://localhost:8080/
③點擊后發(fā)送的登錄請求：http://localhost:8080/api/login
④/api 的作用就是將/api前的localhost：8080變成target的內(nèi)容http://1.2.3.4:5000/
⑤完整的路徑變成了http://1.2.3.4:5000/api/login
⑥實際接口當(dāng)中沒有這個api，所以pathwrite重寫就解決這個問題的。
⑦pathwrite識別到api開頭就會把/api重寫成空，那就是不存在這個/apil了，完整的路徑又變成：http://1.2.3.4:5000/login

image.png

三、 使用場景

1、假設(shè)你要調(diào)取的接口是 http://e.dxy.net/api/test，然后你可以在本地調(diào) localhost:8080/api/test，如axios.get('/api/test')

配置代理后，會做如下轉(zhuǎn)發(fā)：
localhost:8080/api/test -> http://e.dxy.net/api/test
localhost:8080/bcma/api/test -> http://e.dxy.net/bcma/api/test

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
  proxy: {
      '/api': {
          target: 'http://e.dxy.net',  // 后臺接口域名
          ws: true,        //如果要代理 websockets，配置這個參數(shù)
          secure: false,  // 如果是https接口，需要配置這個參數(shù)
          changeOrigin: true,  //是否跨域
      }
  }
}

有新手朋友可能會問：這樣做是不是只是本地調(diào)試這樣做，線上怎么辦呢？
我們一般調(diào)接口axios.get('/api/test')，這樣調(diào)是自動請求的當(dāng)前域名，也就是本地就調(diào)用 localhost:8080，到了線上就是你們自己的服務(wù)域名，所以這個只是為了本地調(diào)試使用。當(dāng)然，如果你要同時調(diào)用很多個不同的域名服務(wù)，那你調(diào)用的時候就要把相關(guān)的域名明確寫出來，如axios.get('http://e.dxy.net/api/test')

場景2

當(dāng)你調(diào)接口后端的命名沒有統(tǒng)一給接口前加 /api 這類的標(biāo)識，那么你可以自己加，也就是你可以在本地調(diào) localhost:8080/api/test，如axios.get('/api/test')，而你要的目標(biāo)接口是 http://e.dxy.net/test，你就可以用 pathRewrite，遇到 /api 就去找代理 http://e.dxy.net 并且把 /api 重寫為/。
所以轉(zhuǎn)發(fā)效果就是：
localhost:8080/api/test -> http://e.dxy.net/test

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
  proxy: {
      '/api': {
          target: 'http://e.dxy.net',  // 后臺接口域名
          ws: true,        //如果要代理 websockets，配置這個參數(shù)
          secure: false,  // 如果是https接口，需要配置這個參數(shù)
          changeOrigin: true,  //是否跨域
          pathRewrite:{
              '^/api': '/'
          }
      }
  }
}

場景3

這個是對所有的接口都代理的，不止是檢測到 /api 的接口，比如：
localhost:8080/api/test -> http://e.dxy.net/api/test
localhost:8080/test -> http://e.dxy.net/test

devServer: {
 proxy: 'http://e.dxy.net'
}

Vue CLI 配置參考