vue-cli3設置代理跨域詳解

老規矩，先上代碼

// 在根目錄下自行創建vue.config.js
module.exports = {
  // cli3 代理是從指定的target后面開始匹配的，不是任意位置；配置pathRewrite可以做替換
  devServer: {
    port: '8080',
    open: true,
    proxy: {
      '/api': {
        // /api 的意義在於，聲明axios中url已/api開頭的請求都適用於該規則，
        // 注意是以/api開頭，即：axios.post({url: '/api/xxx/xxx'})
        target: '服務器真實地址',
        // 此處target的意義在於：造成跨域是因為訪
        // 問的host與我們的請求頭里的origin不一致，所以我們要設置成一致，這個具體請看下文
        changeOrigin: true,
        pathRewrite: {'^/api': 'https://我是服務器/api'}
        // 此處是大部分文章都不會明說的的地方，
        // 既然我們設置了代理，則所有請求url都已寫成/api/xxx/xxx，那請求如何知道我們到底請求的是哪個服務器的數據呢
        // 因此這里的意義在於， 以 /api開頭的url請求，代理都會知道實際上應該請求那里，
        // ‘我是服務器/api’，后面的/api根據實際請求地址決定，即我的請求url：/api/test/test，被代理后請求的則是
        // https://我是服務器/api/test/test
      }
    }
  }
}

 

一個已經代理成功的請求

如圖，可以看到Request URL中的host 和 請求頭中的 origin已經一致了，這就是為什么配置代理可以解決跨域的問題，
造成跨域是因為request url的host與我們的origin不一致，也就是常說的，非同源，通過配置代理，我的請求變成了從
192.168.1.109:8080(這是我本地的ip,解釋一下)向192.168.1.109:8080請求數據，則解決了非同源的問題，

人話模式

人話：代理服務器代替我們請求了服務器的數據返回給了我本機，我本機向我本機請求代理替我拿到的數據，因此我不再需要考慮跨域了

就這樣

作者：_如圖所示
鏈接：https://www.jianshu.com/p/f002ae1c046f
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

 

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8001', //目標地址--api路徑
        ws: true, //// 是否啟用websockets
        changeOrigin: true, //開啟代理：在本地會創建一個虛擬服務端，然后發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
        pathRewrite: { '^/api': 'http://localhost:8080/api' } //這里重寫路徑--vue端口
      }
    }
  }
}