一個前後端分離專案，前端兄弟忙不開我幫忙搞了下前端，遇到了一些跨域的問題，但是網上關於跨域訪問大部分說的都是跨域訪問的定義以及跨域訪問的解決辦法。但是並沒有多少人說明白跨域訪問的流程以及攔截過程。到底是瀏覽器在請求前拒絕訪問不同源URL？還是在請求非同源URL後拒絕載入資料呢？那麼我將在下文中解決下這個疑問。

     假設有這樣的環境：

  WEB容器：部署在ngix上（ngix沒有設定代理轉發），ip127.0.0.1:8001

  後端1：部署在10.141.82.170:19026，地址不同，埠號不同，與web容器非同源

       設定響應頭，允許跨域訪問

                     :"Access-Control-Allow-Origin", "*"

                   "Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept"

                  "Access-Control-Allow-Methods","GET, POST,PUT,DELETE"

  後端2：部署在127.0.0.1:19026，地址不同，埠號不同，與web容器非同源

未設定允許跨域訪問

下面我們來做兩組實驗：

一、在127.0.0.1:8001/index.html頁面，請求10.141.82.170:19026

1、響應頭：

紅框內"Access-Control-Allow-Origin","*"，告知瀏覽器可以跨域訪問

2、response

3、頁面

瀏覽器收到response資訊，並且檢查到響應頭中有"Access-Control-Allow-Origin", "*"，因此將資料展示出來

二、接下來看請求不帶允許跨域訪問的172

在127.0.0.1:8001/index.html頁面，請求10.141.82.172:19026

1、 響應頭

沒有表示能夠跨域訪問的請求頭資訊

2、 response

127.0.0.1沒有設定允許跨域訪問，但是依然請求到了資料。這說明跨域訪問的限制並不是瀏覽器限制傳送請求，而是瀏覽器阻止了請求後資料的載入渲染

3、 頁面

頁面收到了資訊，但是沒有檢查到響應頭中有允許跨域訪問的設定，因此沒有對資料進行載入渲染。並且報出下面的異常：

No 'Access-Control-Allow-Origin' header ispresent on the requested resource

三、總結

跨域訪問限制的流程

1、 瀏覽器傳送跨域請求

2、 接收response資料

3、 檢查響應頭

（1）、如果響應頭中沒有允許跨域訪問的配置，則不載入，並報出響應異常

（2）、如果響應頭中有允許跨域訪問的設定，正常載入資料