首頁 >web前端 >js教程 >CORS跨域的深入理解(程式碼範例)

CORS跨域的深入理解(程式碼範例)

不言
不言轉載
2018-11-27 15:00:362644瀏覽

這篇文章帶給大家的內容是關於CORS跨域的深入理解(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

面試問到資料互動的時候,常常會問跨域如何處理。大部分人都會回答JSONP,然後面試官緊接著就會問:「JSONP缺點是什麼啊?」這時候坑就來了,如果面試官說它支持GET方式,然後面試官就會追問,那如果POST方式發送請求怎麼辦?基礎紮實的面試者會說,使用CORS跨域,不紮實的可能就搖搖頭了。

這還沒結束,如果公司比較正規或很在乎技術功底,你面試的又是重要崗位,HR還想砍你的工資,就會再補一刀,CORS跨域有什麼問題呢?這時候能回答上來的就沒幾個了,就算是你答出來相容性不好,需要IE10 瀏覽器,對方依然有話說,那兼容性怎麼處理呢?應試者就沒話了,要嘛被Pass掉,即便留下來,談薪水的時候就沒底氣了。

CORS跨域實在是面試官pass一個人的利器。

為什麼會這樣呢?

1.遇到CORS請求的情況不多,開發者使用這個場景的很少,大部分都JSONP搞定了。

2.開發者本身技能不紮實,偷懶心態,平常沒有意識和意願去提升自己的技術水平。

3.相關的學習資料少、純前端小白搭建可測試的環境難度高。

面對這條攔路虎,我們今天就徹底解決掉它,讓它不再是我們的軟肋,而是彰顯我們技術實力的亮點。

首先,什麼是CORS?

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(&#39;btn1&#39;);
            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(&#39;请求失败.&#39;);
                    };
                    xhr.send();
                }
            };
        };
    </script>


    <input>

注意點:

1.上面程式碼相容IE8,因為用了XDomainRequest

2.其它程式碼你就當成XMLHttpRequset用,別考慮什麼2.0不2.0的

3.如果你想post數據,可以往xhr.send()裡面搞

4.這裡不建議大家研究"simple methdod"之類別的知識,程式碼弄懂了會用就行,遇到問題了再查也不晚

後台部分:

<?php header(&#39;content-type:application:json;charset=utf8&#39;);
header(&#39;Access-Control-Allow-Origin:*&#39;);
header(&#39;Access-Control-Allow-Methods:GET,POST&#39;);
header(&#39;Access-Control-Allow-Credentials: true&#39;);
header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;);
$str = &#39;{"a":1,"b":2,"c":3,"d":4,"e":5}&#39;; 
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中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除