事實上,面試時我喜歡問跨域,因為多數開發者都知道它並且常用,而我希望能從面試者的回答中知道他在這個問題的深入程度,進一步看看面試者研究問題的思維方式及鑽研精神,然而確實難到了很多人,當然這也不是面試通過的必要條件;這些都是題外話了,呵呵~~~,這裡也不炒冷飯如何實現跨域,也不是分析CORS的原理,因 ...
事實上,面試時我喜歡問跨域,因為多數開發者都知道它並且常用,而我希望能從面試者的回答中知道他在這個問題的深入程度,進一步看看面試者研究問題的思維方式及鑽研精神,然而確實難到了很多人,當然這也不是面試通過的必要條件;這些都是題外話了,呵呵~~~,這裡也不炒冷飯如何實現跨域,也不是分析CORS的原理,因為谷歌一下就有很多參考資料。
有三點內容:dataType、contentType、withCredential;既然說是CORS基礎要點,這三點也當然是圍繞著 CORS 來講。
dataType
dataType有些人可能會覺得陌生,但說起jquery或者是zepto的ajax請求,就想起來了,使用$.ajax請求時,經常會帶上參數dataType : 'json',如下圖:
dataType屬性是為了表明用什麼格式解析服務端響應的數據,json表示ajax接收服務端響應的數據時解析為JSON格式,但是你會發現有時候即使不設置dataType,也能夠正常解析響應數據,頁面上該顯示的內容依然可以正常顯示,因為框架貼心,zepto在你不設置dataType的時候,預設讀取服務端的響應頭Content-Type,例如zepto把服務端的響應頭ContentType : application/json轉換成dataType : 'json',所以只要跟服務端約定好了,前端開發中可以不需要設置dataType,當然了,設置這個屬性會更讓代碼更健壯。
所以,dataType只是框架(zepto/jquery等)封裝時為了方便解析而定義的屬性,並非是原生ajax的屬性。
contentType
嚴格來講是Content-Type,這是http頭裡面的一個屬性,無論是請求頭還是響應頭都可以有這個屬性,但作用並不一樣,另外,zepto的ajax請求配置中可以設置contentType,如下圖,它是用來設置請求頭中的Content-Type;
先說請求頭中的Content-Type,是為了告訴服務端該請求實例的數據格式,一般情況下不需要設置,除非服務端有特殊要求,但如果設置的值超過這三個值application/x-www-form-urlencoded、multipart/form-data、text/plain,CORS跨域請求時會觸發預請求,至於什麼是預請求,這裡不贅述,可以自行查一下百科;
再看看返回頭中的Content-Type,反過來,是服務端告訴客戶端響應實例的數據格式,瀏覽器也會跟據格式來決定是顯示成網頁、JS、CSS或是下載等等,對於瀏覽器來講,這是必需的屬性。
withCredentials
預設情況下,一般瀏覽器的CORS跨域請求都是不會發送cookie等認證信息到服務端的,除非指定了xhr.withCredentials = true,但是只有客戶端單方面的設置了這個值還不行,服務端也需要同意才可以,所以服務端也需要設置好返回頭Access-Control-Allow-Credentials: true;還有一點要註意的,返回頭Access-Control-Allow-Origin的值不能為星號,必須是指定的域,否則cookie等認證信息也是發送不了。
關於withCredentials,還可以參閱msdn這裡: