Http跨域時的Option請求

寫這篇文章時，我們碰到的一個場景是：要給R系統做一個擴展小應用，前端的html、js放在R系統里，後端需要做一個單獨的站點N.B.com。這就導致了跨域問題，而且要命的是，後端同學沒有許可權向招聘的系統里加介面做後端跨域，因此只能做個介面允許前端跨域訪問。

有兩種方案：1. 使用ajax直接跨域訪問，2.使用JsonP。實際使用時，由於JsonP向Server提交URL的長度限制在8000字元，超過了則被瀏覽器拒絕，因此不採用。

對於第一種方案，後端需要做的工作是：

介面允許允許跨域請求：

header("Access-Control-Allow-Origin:*"); //支持全域名訪問，不安全，部署後需要限制為R.com

header("Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE"); //支持的http動作

header("Access-Control-Allow-Headers:x-requested-with,content-type"); //響應頭 請按照自己需求添加。

前端發起跨域請求：

就是正常的$.ajax請求即可。

但是，碰到個問題，國內網站基本沒有講，就是option請求問題。。

簡要翻譯內容如下：

在正式跨域的請求前，瀏覽器會根據需要，發起一個「PreFlight」（也就是Option請求），用來讓服務端返回允許的方法（如get、post），被跨域訪問的Origin（來源，或者域），還有是否需要Credentials(認證信息）

三種場景：

1. 如果跨域的請求是Simple Request（簡單請求 ），則不會觸發「PreFlight」。Mozilla對於簡單請求的要求是：

以下三項必須都成立：

1. 只能是Get、Head、Post方法

2. 除了瀏覽器自己在Http頭上加的信息（如Connection、User-Agent），開發者只能加這幾個：Accept、Accept-Language、Content-Type、。。。。

3. Content-Type只能取這幾個值：

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

2. 其他會導致「PreFlight」的請求。條件基本上是簡單請求的補集。。比如我們的這個請求：

3. 如果是PreFlight request 並且是Redirect的：

瀏覽器直接給拒了 _(:з」∠)_ 。沒太弄明白場景。。如果真想跨域跳轉，發一個Simple Request就OK。。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！