手摸手叫你用Proxy處理跨域

首先，跨域問題應該是先後端分離開發時候都會遇到的，上週，新加入的小夥伴還不熟悉，因此乾脆就寫一下。本身也複習下。

一、什麼是跨域

Access to XMLHttpRequest at 'https://XXX.com' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

當你發現請求不通，而後打開控制檯發現這句話，那麼，嗯，跨域了

二、爲何會跨域

跨域，顧名思義，就是跨域了他原本的區域
如上面的描述所說，你是個http://localhost:8080的網址，可是你卻在請求https://XXX.com
瀏覽器阻止了這個請求，告訴你，不行
至於爲何不行，是由於瀏覽器有同源策略
因此：
知識點一、只有瀏覽器有跨域問題
知識點二、這個請求實際很大程度沒發出去，因此後端實際什麼都沒收到

三、怎麼處理跨域

處理的方法不少，這個這裏不詳細展開（這是個經典面試題）
其中之一就是使用Proxy

四、Proxy說明

Proxy中間件，實際上起了個代理的做用，你能夠理解爲，你發出請求，被Proxy攔截了，他再把你的請求按照你的配置，轉發到真正的地址上去，而後返回以後，他再把結果返回給你
本質上，是在本地起了一個node服務去作請求的轉發代理

因此：
知識點：開發環境才使用Proxy（這句話其實表述的不對，什麼環境，均可以使用Proxy，可是實際工做生產中，基本上也只有開發環境會出現跨域，由於你和後端ip不同）

五、怎麼使用Proxy

目前，基本上使用的都是http-proxy-middleware這個中間件
新版的vue-cli配置
找到vue.config.js文件(沒找到新建一個，和package.json同層級)

// vue.config.js
module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

完成配置請重啓服務， 否則不會生效
這下，咱們全部的請求（不包括請求圖片之類的），都會被實際請求到localhost:4000上
對於早些版本，則在
config/index.js中
`dev: {

assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
  '/api': {
    target: "http://localhost:4000",
    changeOrigin: true,
   }
},`

這下，咱們訪問/api,實際在訪問http://localhost:4000
另外，其餘經常使用的參數還有ws，pathRewrite
ws則表示對websocket的轉發
pathRewrite則表示是否對路徑從新更改

下面舉個栗子

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        ws: true, // 對websocket也代理
        changeOrigin: true，
        pathRewrite: {
            '^/api/old-path': '/api/new-path', // 這個會把/api/old-path,
            // 實際換成http://localhost:4000/api/new-path
            // （應該不多用到，通常都是一致的）
        }
      }
    }
  }
}

最後的知識點：記得項目重啓才能看見效果這個時候，你們打開控制檯一看，欸，沒變啊，連接仍是原來的，沒有變成代理以後的。答:這個中間件，你能夠這麼理解，他是在控制檯說看見的請求發出去以後代理轉發的，因此，成功控制檯連接也不會變化。