這篇文章帶給大家的內容是關於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.使用起來稍微複雜了些
怎麼用？
前端部分：
nbsp;html>
<meta>
<meta>
<meta>
<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>
<input>
登入後複製
注意點：
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。
以上是CORS跨域的深入理解（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
