CORS跨域的深入理解（代碼示例）
時間：2021-3-25作者：未知來源：瀏覽器部落人氣：
- 網頁的本質就是超級文本標記語言，通過結合使用其他的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>注意點：
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中文網其它相關文章！
網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。
關鍵詞：CORS跨域的深入理解（代碼示例）