一篇文章搞明白CORS跨域

發(fā)布時(shí)間：2020-07-10 02:28:18 來(lái)源：網(wǎng)絡(luò) 閱讀：2776 作者：面包理想欄目：web開(kāi)發(fā)

面試問(wèn)到數(shù)據(jù)交互的時(shí)候，經(jīng)常會(huì)問(wèn)跨域如何處理。大部分人都會(huì)回答JSONP，然后面試官緊接著就會(huì)問(wèn)：“JSONP缺點(diǎn)是什么啊？”這個(gè)時(shí)候坑就來(lái)了，如果面試者說(shuō)它支持GET方式，然后面試官就會(huì)追問(wèn)，那如果POST方式發(fā)送請(qǐng)求怎么辦？基礎(chǔ)扎實(shí)一些的面試者會(huì)說(shuō)，使用CORS跨域，不扎實(shí)的可能就搖搖頭了。

這還沒(méi)結(jié)束，如果公司比較正規(guī)或者很在乎技術(shù)功底，你面試的又是重要崗位，HR還想砍你的工資，就會(huì)再補(bǔ)一刀，CORS跨域有什么問(wèn)題呢？這時(shí)候能回答上來(lái)的就沒(méi)幾個(gè)了，就算是你答出來(lái)兼容性不好，需要IE10+瀏覽器,對(duì)方依然有話說(shuō)，那兼容性怎么處理呢？應(yīng)試者就沒(méi)話了，要么被Pass掉，即便留下來(lái)，談工資的時(shí)候就沒(méi)底氣了。

CORS跨域?qū)嵲谑敲嬖嚬賞ass一個(gè)人的利器。

為什么會(huì)這樣呢？

1.遇到CORS請(qǐng)求的情況不多，開(kāi)發(fā)者使用這個(gè)場(chǎng)景的很少，大部分都JSONP搞定了。

2.開(kāi)發(fā)者自身技能不扎實(shí)，偷懶心態(tài)，平常沒(méi)有意識(shí)和意愿去提升自己的技術(shù)水平。

3.相關(guān)的學(xué)習(xí)資料少、純前端小白搭建可測(cè)試的環(huán)境難度大。

面對(duì)這條攔路虎，我們今天就徹底解決掉它，讓它不再是我們的軟肋，而是彰顯我們技術(shù)實(shí)力的亮點(diǎn)。

首先，什么是CORS?

一篇文章搞明白CORS跨域

CORS是一個(gè)W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制。

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

1.支持POST以及所有HTTP請(qǐng)求
2.安全性相對(duì)JSOP更高
3.前端要做的事兒比較少

缺點(diǎn)：

1.不兼容老版本瀏覽器，如IE9及其以下
2.需要服務(wù)端支持
3.使用起來(lái)稍微復(fù)雜了些

怎么用？

前端部分：

<!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跨域請(qǐng)求</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('請(qǐng)求失敗.');
                    };
                    xhr.send();
                }
            };
        };
    </script>
</head>
<body>
    <input type="button" value="獲取數(shù)據(jù)" id="btn1">
</body>
</html>

注意點(diǎn)：

1.上面代碼兼容IE8,因?yàn)橛昧薠DomainRequest

2.其它代碼你就當(dāng)成XMLHttpRequset用，別考慮什么2.0不2.0的

3.如果你想post數(shù)據(jù)，可以往 xhr.send()里面搞

4.這里不建議大家研究"simple methdod"之類(lèi)的知識(shí)，代碼弄懂了會(huì)用就行，遇到問(wèn)題了再查也不晚

后臺(tái)部分：

<?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;
?>

注意點(diǎn)：

1.Access-Control-Allow-Origin: 表示允許任何域名跨域訪問(wèn)，如果需要指定某域名才允許跨域訪問(wèn)，只需把Access-Control-Allow-Origin:改為Access-Control-Allow-Origin:允許的域名,實(shí)際工作也要這么做2.Access-Control-Allow-Methods:GET,POST 規(guī)定允許的方法，建議控制嚴(yán)格些，不要隨意放開(kāi)DELETE之類(lèi)的權(quán)限

2.Access-Control-Allow-Credentials

該字段可選。它的值是一個(gè)布爾值，表示是否允許發(fā)送Cookie。默認(rèn)情況下，Cookie不包括在CORS請(qǐng)求之中。設(shè)為true，即表示服務(wù)器明確許可，Cookie可以包含在請(qǐng)求中，一起發(fā)給服務(wù)器。這個(gè)值也只能設(shè)為true，如果服務(wù)器不要瀏覽器發(fā)送Cookie，刪除該字段即可。

最后，面試常考問(wèn)題：

CORS和JSONP的應(yīng)用場(chǎng)景區(qū)別？

CORS要求瀏覽器(>IE10)和服務(wù)器的同時(shí)支持，是跨域的根本解決方法，由瀏覽器自動(dòng)完成。優(yōu)點(diǎn)在于功能更加強(qiáng)大支持各種HTTP Method，缺點(diǎn)是兼容性不如JSONP。

向AI問(wèn)一下細(xì)節(jié)

一篇文章搞明白CORS跨域

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽