網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。
本篇文章給大家帶來的內容是關于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>