一篇文章搞明白CORS跨域

時間 2019-11-06

標籤一篇文章明白 cors 简体版

原文原文鏈接

面試問到數據交互的時候，常常會問跨域如何處理。大部分人都會回答JSONP，而後面試官緊接着就會問：「JSONP缺點是什麼啊？」這個時候坑就來了，若是面試者說它支持GET方式，而後面試官就會追問，那若是POST方式發送請求怎麼辦？基礎紮實一些的面試者會說，使用CORS跨域，不紮實的可能就搖搖頭了。php

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

CORS跨域實在是面試官pass一我的的利器。前端

爲何會這樣呢？面試

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

2.開發者自身技能不紮實，偷懶心態，日常沒有意識和意願去提高本身的技術水平。跨域

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

面對這條攔路虎，咱們今天就完全解決掉它，讓它再也不是咱們的軟肋，而是彰顯咱們技術實力的亮點。安全

首先，什麼是CORS?服務器

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

優缺點app

優勢：

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。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。