一篇文章搞明白CORS跨域
面試問到資料互動的時候,經常會問跨域如何處理。大部分人都會回答JSONP,然後面試官緊接著就會問:“JSONP缺點是什麼啊?”這個時候坑就來了,如果面試者說它支援GET方式,然後面試官就會追問,那如果POST方式傳送請求怎麼辦?基礎紮實一些的面試者會說,使用CORS跨域,不紮實的可能就搖搖頭了。
這還沒結束,如果公司比較正規或者很在乎技術功底,你面試的又是重要崗位,HR還想砍你的工資,就會再補一刀,CORS跨域有什麼問題呢?這時候能回答上來的就沒幾個了,就算是你答出來相容性不好,需要IE10+瀏覽器,對方依然有話說,那相容性怎麼處理呢?應試者就沒話了,要麼被Pass掉,即便留下來,談工資的時候就沒底氣了。
CORS跨域實在是面試官pass一個人的利器。
為什麼會這樣呢?
1.遇到CORS請求的情況不多,開發者使用這個場景的很少,大部分都JSONP搞定了。
2.開發者自身技能不紮實,偷懶心態,平常沒有意識和意願去提升自己的技術水平。
3.相關的學習資料少、純前端小白搭建可測試的環境難度大。
面對這條攔路虎,我們今天就徹底解決掉它,讓它不再是我們的軟肋,而是彰顯我們技術實力的亮點。
首先,什麼是CORS?
CORS是一個W3C標準,全稱是"跨域資源共享"(Cross-origin resource sharing)。 它允許瀏覽器向跨源伺服器,發出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。
優缺點
優點:
1.支援POST以及所有HTTP請求
2.安全性相對JSOP更高
3.前端要做的事兒比較少
缺點:
1.不相容老版本瀏覽器,如IE9及其以下
2.需要服務端支援
3.使用起來稍微複雜了些
怎麼用?
前端部分:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CORS跨域請求</title> <script> function createCORSRequest(method, url) { var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) { xhr.open(method, url, true); } else if (typeof XDomainRequest != "undefined") { xhr = new XDomainRequest(); xhr.open(method, url); } else { xhr = null; } return xhr; } window.onload = function () { var oBtn = document.getElementById('btn1'); oBtn.onclick = function () { var xhr = createCORSRequest("get", "http://wpdic.com/cors.php"); if (xhr) { xhr.onload = function () { var json = JSON.parse(xhr.responseText); alert(json.a); }; xhr.onerror = function () { alert('請求失敗.'); }; xhr.send(); } }; }; </script> </head> <body> <input type="button" value="獲取資料" id="btn1"> </body> </html>
注意點:
1.上面程式碼相容IE8,因為用了XDomainRequest
2.其它程式碼你就當成XMLHttpRequset用,別考慮什麼2.0不2.0的
3.如果你想post資料,可以往 xhr.send()裡面搞
4.這裡不建議大家研究"simple methdod"之類的知識,程式碼弄懂了會用就行,遇到問題了再查也不晚
後臺部分:
<?php
header('content-type:application:json;charset=utf8');
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:GET,POST');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
$str = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
echo $str;
?>
注意點:
1.Access-Control-Allow-Origin: 表示允許任何域名跨域訪問,如果需要指定某域名才允許跨域訪問,只需把Access-Control-Allow-Origin:改為Access-Control-Allow-Origin:允許的域名,實際工作也要這麼做2.Access-Control-Allow-Methods:GET,POST 規定允許的方法,建議控制嚴格些,不要隨意放開DELETE之類的許可權
2.Access-Control-Allow-Credentials
該欄位可選。它的值是一個布林值,表示是否允許傳送Cookie。預設情況下,Cookie不包括在CORS請求之中。設為true,即表示伺服器明確許可,Cookie可以包含在請求中,一起發給伺服器。這個值也只能設為true,如果伺服器不要瀏覽器傳送Cookie,刪除該欄位即可。
最後,面試常考問題:
CORS和JSONP的應用場景區別?
CORS要求瀏覽器(>IE10)和伺服器的同時支援,是跨域的根本解決方法,由瀏覽器自動完成。優點在於功能更加強大支援各種HTTP Method,缺點是相容性不如JSONP。