本文主要給大家介紹了關于Javascript跨域后臺設置攔截的相關內容，分享出來供大家參考學習，話不多說了，來一起看看詳細的介紹吧。

子域名之間互相訪問需要跨域

結論放在開頭：

1.服務端必須設置允許跨域

2.客戶端帶cookie需要設置 withCredentials

3.無論服務端是否允許跨域，該request都會完整執行

4. options 預請求需要設置返回空，不然requestMapping沒有支持該方法則出錯

環境搭建

需求

首先需要搭建兩個環境。一個是提供API的server A，一個是需要跨域訪問API的server B。

Server A提供了一個api。完整的請求request是：

https://local.corstest.com.net:8443/contentmain/getDepositsRoomAndRatePlanInfo.json?htid=759&_=1490855801818

Server B有個頁面page:

http://cros.corstest.com.net:3001/test.html

并且這個page需要請求server A的api。

但由于跨域保護，請求失敗：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'xxxxx' is therefore not allowed access.

修改host

首先本地配置兩個指向127.0.0.1的host，方便互相跨域。

127.0.0.1 local.corstest.com.net 127.0.0.1 cros.corstest.com.net

啟動項目A，方便提供API。

至于項目B，測試跨域只要寫個html靜態頁面即可。那么就寫一個test.html，并通過一個工具發布：

 browser-sync 

安裝

npm install -g browser-sync

本地啟動一個test.html

browser-sync start --server --files "*.html" --host "cros.corstest.com.net" --port 3001

關于跨域CORS

ruanyifeng 的文章里說瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。

其中同時滿足一下2種標準即為簡單跨域：

1) 請求方法是以下三種方法之一：

2）HTTP的頭信息不超出以下幾種字段：

而其他情況，非簡單請求是那種對服務器有特殊要求的請求，比如請求方法是  PUT 或 DELETE ，或者 Content-Type 字段的類型是 application/json 。非簡單請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求（preflight），即 options 請求。

關鍵

跨域的關鍵是瀏覽器獲得服務器的認可，而服務器的認可就是header里的 Access-Control-Allow-Origin 。瀏覽器通過比較服務端返回的response中是否包含這個字段，以及包含這個字段的內容是否是當前網址來確定是否跨域。也就是說繞過瀏覽器是可以不用跨域的。