解決跨域問題

一、為什么會有跨域問題？

是因為瀏覽器的同源策略是對ajax請求進行阻攔了，但是不是所有的請求都給做跨域，像是一般的href屬性，a標簽什么的都不攔截。

二、解決跨域問題的兩種方式

• JSONP
• CORS 

三、JSONP

先簡單來說一下JSONP，具體詳細詳見上面JSONP

JSONP是json用來跨域的一個東西。原理是通過script標簽的跨域特性來繞過同源策略。（創建一個回調函數，然后在遠程服務上調用這個函數並且將json數據形式作為參數傳遞，完成回調）。

四、CORS跨域

隨着技術的發展，現在的瀏覽器可以主動支持設置從而允許跨域請求，即：跨域資源共享（CORS，Cross-Origin Resource Sharing），其本質是設置響應頭，使得瀏覽器允許跨域請求。

1、簡單請求和復雜請求

條件：
    1、請求方式：HEAD、GET、POST
    2、請求頭信息：
        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type 對應的值是以下三個中的任意一個
                                application/x-www-form-urlencoded
                                multipart/form-data
                                text/plain
 
注意：同時滿足以上兩個條件時，則是簡單請求，否則為復雜請求

2、簡單請求和復雜請求的區別？

簡單請求：一次請求

非簡單請求：兩次請求，在發送數據之前會先發第一次請求做‘預檢’，只有‘預檢’通過后才再發送一次請求用於數據傳輸。

3、關於預檢

- 請求方式：OPTIONS
- “預檢”其實做檢查，檢查如果通過則允許傳輸數據，檢查不通過則不再發送真正想要發送的消息
- 如何“預檢”
     => 如果復雜請求是PUT等請求，則服務端需要設置允許某請求，否則“預檢”不通過
        Access-Control-Request-Method
     => 如果復雜請求設置了請求頭，則服務端需要設置允許某請求頭，否則“預檢”不通過
        Access-Control-Request-Headers

4、CORS的優缺點

• CORS的優點：可以發任意請求
• CORS的缺點：上是復雜請求的時候得先做個預檢，再發真實的請求。發了兩次請求會有性能上的損耗

五、JSONP和CORS的區別

JSONP：服務端不用修改，需要改前端。發jsonp請求

JSONP：只能發GET請求

CORS：前端的代碼不用修改，服務端的代碼需要修改。如果是簡單請求的話在服務端加上一個響應頭。

CORS：可以發任意請求

六、基於CORS實現ajax請求

1、支持跨域，簡單請求

客戶端

 

服務端

 

2、支持跨域，復雜請求

如果是復雜請求在你真正的發請求之前，會先偷偷的發一個OPTION請求，先預檢一下，我

允許你來你才來

如果想預檢通過就得寫個option請求

 

 

由於復雜請求時，首先會發送“預檢”請求，如果“預檢”成功，則發送真實數據。

• “預檢”請求時，允許請求方式則需服務器設置響應頭：Access-Control-Request-Method
• “預檢”請求時，允許請求頭則需服務器設置響應頭：Access-Control-Request-Headers
• “預檢”緩存時間，服務器設置響應頭：Access-Control-Max-Age

3、跨域獲取響應頭

默認獲取到的所有響應頭只有基本信息，如果想要獲取自定義的響應頭，則需要再服務器端設置Access-Control-Expose-Headers。

 

 

4、跨域傳輸cookie

在跨域請求中，默認情況下，HTTP Authentication信息，Cookie頭以及用戶的SSL證書無論在預檢請求中或是在實際請求都是不會被發送。

如果想要發送：

• 瀏覽器端：XMLHttpRequest的withCredentials為true
• 服務器端：Access-Control-Allow-Credentials為true
• 注意：服務器端響應的 Access-Control-Allow-Origin 不能是通配符 *