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>