CORS解決跨域問題
阿新 • • 發佈:2018-11-19
一 CORS
隨著技術的發展,現在的瀏覽器可以支援主動設定從而允許跨域請求,即:跨域資源共享(CORS,Cross-Origin Resource Sharing),其本質是設定響應頭,使得瀏覽器允許跨域請求
簡單請求 OR 非簡單請求
1 條件: 2 1、請求方式:HEAD、GET、POST 3 2、請求頭資訊: 4 Accept 5 Accept-Language 6 Content-Language 7 Last-Event-ID 8 Content-Type 對應的值是以下三個中的任意一個9 application/x-www-form-urlencoded 10 multipart/form-data 11 text/plain 12 13 注意:同時滿足以上兩個條件時,則是簡單請求,否則為複雜請求
* 簡單請求和非簡單請求的區別?
簡單請求: 一次請求
非簡單請求:兩次請求,在傳送資料之前會先發一次請求用於做“預檢”,只有“預檢”通過後才再傳送一次請求用於資料傳輸。
* 關於“預檢”
- 請求方式:OPTIONS - “預檢”其實做檢查,檢查如果通過則允許傳輸資料,檢查不通過則不再發送真正想要傳送的訊息 - 如何“預檢” => 如果複雜請求是PUT等請求,則服務端需要設定允許某請求,否則“預檢”不通過 Access-Control-Request-Method => 如果複雜請求設定了請求頭,則服務端需要設定允許某請求頭,否則“預檢”不通過 Access-Control-Request-Headers
二 基於cors實現AJAX請求
1、支援跨域,簡單請求
伺服器設定響應頭:Access-Control-Allow-Origin = '域名' 或 '*'
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p> <input type="submit" onclick="XmlSendRequest();" /> </p> <p> <input type="submit" onclick="JqSendRequest();" /> </p> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> function XmlSendRequest(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { var result = xhr.responseText; console.log(result); } }; xhr.open('GET', "http://c2.com:8000/test/", true); xhr.send(); } function JqSendRequest(){ $.ajax({ url: "http://c2.com:8000/test/", type: 'GET', dataType: 'text', success: function(data, statusText, xmlHttpRequest){ console.log(data); } }) } </script> </body> </html>
2、支援跨域,複雜請求
由於複雜請求時,首先會發送“預檢”請求,如果“預檢”成功,則傳送真實資料。
- “預檢”請求時,允許請求方式則需伺服器設定響應頭:Access-Control-Request-Method
- “預檢”請求時,允許請求頭則需伺服器設定響應頭:Access-Control-Request-Headers
- “預檢”快取時間,伺服器設定響應頭:Access-Control-Max-Age
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p> <input type="submit" onclick="XmlSendRequest();" /> </p> <p> <input type="submit" onclick="JqSendRequest();" /> </p> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> function XmlSendRequest(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { var result = xhr.responseText; console.log(result); } }; xhr.open('PUT', "http://c2.com:8000/test/", true); xhr.setRequestHeader('k1', 'v1'); xhr.send(); } function JqSendRequest(){ $.ajax({ url: "http://c2.com:8000/test/", type: 'PUT', dataType: 'text', headers: {'k1': 'v1'}, success: function(data, statusText, xmlHttpRequest){ console.log(data); } }) } </script> </body> </html>
3、跨域獲取響應頭
預設獲取到的所有響應頭只有基本資訊,如果想要獲取自定義的響應頭,則需要再伺服器端設定Access-Control-Expose-Headers。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p> <input type="submit" onclick="XmlSendRequest();" /> </p> <p> <input type="submit" onclick="JqSendRequest();" /> </p> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> function XmlSendRequest(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { var result = xhr.responseText; console.log(result); // 獲取響應頭 console.log(xhr.getAllResponseHeaders()); } }; xhr.open('PUT', "http://c2.com:8000/test/", true); xhr.setRequestHeader('k1', 'v1'); xhr.send(); } function JqSendRequest(){ $.ajax({ url: "http://c2.com:8000/test/", type: 'PUT', dataType: 'text', headers: {'k1': 'v1'}, success: function(data, statusText, xmlHttpRequest){ console.log(data); // 獲取響應頭 console.log(xmlHttpRequest.getAllResponseHeaders()); } }) } </script> </body> </html>
4、跨域傳輸cookie
在跨域請求中,預設情況下,HTTP Authentication資訊,Cookie頭以及使用者的SSL證書無論在預檢請求中或是在實際請求都是不會被髮送。
如果想要傳送:
- 瀏覽器端:XMLHttpRequest的withCredentials為true
- 伺服器端:Access-Control-Allow-Credentials為true
- 注意:伺服器端響應的 Access-Control-Allow-Origin 不能是萬用字元 *
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p> <input type="submit" onclick="XmlSendRequest();" /> </p> <p> <input type="submit" onclick="JqSendRequest();" /> </p> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> function XmlSendRequest(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { var result = xhr.responseText; console.log(result); } }; xhr.withCredentials = true; xhr.open('PUT', "http://c2.com:8000/test/", true); xhr.setRequestHeader('k1', 'v1'); xhr.send(); } function JqSendRequest(){ $.ajax({ url: "http://c2.com:8000/test/", type: 'PUT', dataType: 'text', headers: {'k1': 'v1'}, xhrFields:{withCredentials: true}, success: function(data, statusText, xmlHttpRequest){ console.log(data); } }) } </script> </body> </html>