悟空h5專題採用的是前後端分離方案，伺服器網域名稱和專題網域名稱不一致，會受到瀏覽器同源策略影響。
我們發現資料主介面會發起兩次，其中第乙個請求為預檢請求。
用於獲取目的資源所支援的通訊選項。客戶端可以對特定的 url 使用 options 方法，也可以對整站（通過將 url 設定為「*」）使用該方法。
在 cors 中，可以使用 options 方法發起乙個預檢請求，以檢測實際請求是否可以被伺服器所接受。預檢請求報文中的 access-control-request-method 首部字段告知伺服器實際請求所使用的 http 方法；access-control-request-headers 首部字段告知伺服器實際請求所攜帶的自定義首部字段。伺服器基於從預檢請求獲得的資訊來判斷，是否接受接下來的實際請求。
有趣的是專題詳情為 get 介面，為何 get 請求也會發起 option 預檢？
這個原因得從簡單請求和複雜請求說起，跨域請求分為簡單和複雜兩種：
簡單請求:
請求方式為如下之一：
head
getpost
http 請求頭只能包含如下資訊：
accept
accept-language
content-language
last-event-id
content-type，但僅能是下列之一
multipart/form-data
text/plain
任何乙個不滿足上述要求的請求，即被認為是複雜請求。乙個複雜請求不僅有包含通訊內容的請求，同時也包含預檢資訊。
專題配置介面請求頭中帶有自定義 header，瀏覽器會認定為非簡單請求，需要向伺服器發出檢查，判斷該網域名稱是否允許跨域。
經過分析發現，自定義 header 其實在此業務場景中非必傳自帶，發出預檢請求至少會有 100ms 的耗時，無形中延長頁面繪製時間。
最終解決方案：去除自定義header，修改為簡單請求，避免該請求發出預檢。
前後端分離跨域問題之OPTION請求
在正式跨域的請求前，瀏覽器會根據需要，發起乙個 preflight 也就是option請求 用來讓服務端返回允許的方法 如get post 被跨域訪問的origin 或者域 還有是否需要credentials 認證資訊 三種場景 如果跨域的請求是 request 簡單請求 則不會觸發 preflig...
cors 跨域option配置詳解
注意 origin不支援 http example.com 這種配置,多個必須得寫正則或者傳陣列進去 具體規則看下邊說明 methods 配置access control allow methodscors標頭。期望以逗號分隔的字串 例如 get，put，post 或陣列 例如 get put po...
JS跨域請求 Ajax跨域請求JSONP
前兩天被問到ajax跨域如何解決，還真被問住了，光知道有個什麼jsonp，迷迷糊糊的沒有說上來。抱著有問題必須解決的態度，我看了許多資料，原來如此。為何一直知道jsonp，但一直迷迷糊糊的不明白呢？網上那些介紹資料都寫的太複雜了！我是能多簡單就多簡單，爭取讓你十分鐘看完！ajax之所以需要 跨域 罪...