如何實(shí)現(xiàn) Ajax 的跨域訪問2018-09-30

簡介

由于受瀏覽器的同源策略（same-origin policy）的影響， Ajax 請(qǐng)求默認(rèn)只能在同一域名下進(jìn)行訪問戒努。

同源策略是瀏覽器安全的基石，所有的瀏覽器都實(shí)行了這個(gè)策略卵贱。

同源策略

同源策略是指三個(gè)相同：

協(xié)議相同（比如西乖，都是 http）
域名相同（比如松靡，都是 www.example.com）
端口相同（比如简僧，都是 80 端口）

同源政策的目的，是為了保證用戶信息的安全雕欺，防止惡意的網(wǎng)站竊取用戶的數(shù)據(jù)岛马。

如果非同源，共有三種行為受到限制：

Cookie屠列、LocalStorage 和 IndexDB 無法讀取
DOM 無法獲得
AJAX 請(qǐng)求不能發(fā)送

下面啦逆，我們只講述 AJAX 請(qǐng)求如何規(guī)避同源策略的影響。

Ajax 的跨域場(chǎng)景描述

這里笛洛，我先描述一下 Ajax 的跨域場(chǎng)景夏志。

在網(wǎng)站 http://apidemo.test ，有一個(gè) API 接口苛让，http://apidemo.test/api/test 沟蔑。它的路由為：

Route::get('test', function(){
    return response()->json(['id'=>1, 'name'=>'test']);
});

在本網(wǎng)站的某個(gè)頁面，也就是同源的情況下狱杰，執(zhí)行的 Ajax 請(qǐng)求為：

$.get('http://apidemo.test/api/test', function(data){ console.log(data) });

可以得到正確的 json 響應(yīng)：

{id: 1, name: "test"}

但是瘦材，現(xiàn)在如果要從另外一個(gè)網(wǎng)站（http://adm.test）的某個(gè)頁面（ http://adm.test/demo ），發(fā)送 Ajax 請(qǐng)求到 http://apidemo.test/api/test

$.get('http://apidemo.test/api/test', function(data){ console.log(data) });

就屬于 Ajax 的跨域問題仿畸，由于不同源食棕，所以會(huì)報(bào)錯(cuò)：

Failed to load http://apidemo.test/api/test: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://adm.test' is therefore not allowed access.

實(shí)現(xiàn) Ajax 的跨域訪問

同源政策規(guī)定，AJAX 請(qǐng)求只能發(fā)給同源的網(wǎng)址错沽，否則就報(bào)錯(cuò)簿晓。

除了架設(shè)服務(wù)器代理（瀏覽器請(qǐng)求同源服務(wù)器，再由后者請(qǐng)求外部服務(wù)）甥捺，還有三種方法規(guī)避這個(gè)限制抢蚀。

WebSocket
JSONP
CORS

WebSocket

WebSocket 是一種通信協(xié)議，使用 ws://（非加密）和 wss://（加密）作為協(xié)議前綴镰禾。該協(xié)議不實(shí)行同源政策皿曲，只要服務(wù)器支持 WebSocket 唱逢，就可以通過它進(jìn)行跨源通信。

由于 WebSocket 很少用到屋休，故這里不作講述坞古。感興趣的可自行參考：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

JSONP

JSONP 是服務(wù)器與客戶端跨源通信的常用方法。最大特點(diǎn)就是簡單適用劫樟，老式瀏覽器全部支持痪枫，服務(wù)器改造非常小。

JSONP （JSON with Padding）是 JSON 的一種“使用模式”叠艳，可用于解決瀏覽器的跨域數(shù)據(jù)訪問的問題奶陈。

JSONP 的基本思想是：

服務(wù)器端返回的數(shù)據(jù)格式是一段可在客戶端執(zhí)行的 javascript 代碼，形如：callback_name(json_data)
客戶端獲取該 jsonp 數(shù)據(jù)附较，并自動(dòng)執(zhí)行回調(diào)函數(shù)吃粒。

這種使用模式就是所謂的 JSONP。用 JSONP 抓到的數(shù)據(jù)并不是 JSON拒课，而是任意的 JavaScript徐勃。

首先，我們修改服務(wù)器端 http://apidemo.test/api/test 返回的數(shù)據(jù)內(nèi)容：

Route::get('test', function(){
    $callback = $_REQUEST['callback'];  // 獲取回調(diào)函數(shù)名
    $json_data = json_encode(['id'=>1, 'name'=>'test']);
    return $callback . "(" . $json_data . ")";  // 輸出 jsonp 格式的數(shù)據(jù)
});

然后早像，修改客戶端 http://adm.test/demo 的代碼：

<script>
    function foo(data) {
        console.log(data);
    };
</script>
<script type="text/javascript" src="http://apidemo.test/api/test?callback=foo"></script>

這樣僻肖，就實(shí)現(xiàn)了 Ajax 的跨域訪問。

客戶端的代碼卢鹦，還可以這樣寫：

<script>
    $.ajax({
        url:'http://apidemo.test/api/test', 
        dataType:'jsonp',
        success:function(data){
            console.log(data);
        }
    });
</script>

或者

<script>
    $.getJSON('http://apidemo.test/api/test?callback=?',function(data){
        console.log(data);
    });
</script>

或者

<script>
    $.get('http://apidemo.test/api/test',function(data){
        console.log(data);
    },'jsonp');
</script>

其實(shí)臀脏，客戶端的 jsonp 寫法還有很多。

注：只有當(dāng)客戶端的寫法是第一種時(shí)冀自，才需要在客戶端顯式的的定義回調(diào)函數(shù)谁榜。

我們可以發(fā)現(xiàn)，服務(wù)器器端返回的 jsonp 數(shù)據(jù)內(nèi)容其實(shí)是：

foo({"id":1,"name":"test"})

如果客戶端寫法不是第一種凡纳，服務(wù)器端返回的是：

jQuery21408122298865448574_1523471817778({"id":1,"name":"test"})

格式為：callback_name(json_data)

也就是說窃植，服務(wù)器端返回的 jsonp 其實(shí)就是：回調(diào)函數(shù)的調(diào)用，參數(shù)是我們要返回的 json 數(shù)據(jù)荐糜。

注：如果客戶端沒有顯式地指定回調(diào)函數(shù)的名稱巷怜，會(huì)自動(dòng)生成一個(gè)隨機(jī)的名稱，傳遞給服務(wù)器端暴氏。

JSONP 的缺點(diǎn)是只能發(fā)送 GET 請(qǐng)求延塑。

CORS

CORS 是跨源資源分享（Cross-Origin Resource Sharing）的縮寫。它是 W3C 標(biāo)準(zhǔn)答渔，是跨源 AJAX 請(qǐng)求的根本解決方法关带。

相比 JSONP 只能發(fā) GET 請(qǐng)求，CORS 允許任何類型的請(qǐng)求。

強(qiáng)烈推薦使用 CORS 宋雏。

CORS 需要瀏覽器和服務(wù)器同時(shí)支持芜飘。目前，所有瀏覽器都支持該功能磨总，IE 瀏覽器不能低于 IE10嗦明。

整個(gè) CORS 通信過程，都是瀏覽器自動(dòng)完成蚪燕，不需要用戶參與娶牌。瀏覽器一旦發(fā)現(xiàn) AJAX 請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息馆纳，有時(shí)還會(huì)多出一次附加的請(qǐng)求诗良，但用戶不會(huì)有感覺。

實(shí)現(xiàn) CORS 通信的關(guān)鍵是服務(wù)器鲁驶。只要服務(wù)器實(shí)現(xiàn)了 CORS 累榜，就可以跨源通信。

兩種請(qǐng)求

瀏覽器將 CORS 請(qǐng)求分成兩類：簡單請(qǐng)求（simple request）和非簡單請(qǐng)求（not-so-simple request）灵嫌。

只要同時(shí)滿足以下兩大條件，就是簡單請(qǐng)求葛作。

（1）請(qǐng)求方法是以下三種方法之一：

HEAD
GET
POST

（2）HTTP 的請(qǐng)求頭信息的特征：

Content-Type：只限于三個(gè)值 application/x-www-form-urlencoded寿羞、multipart/form-data、text/plain
沒有添加自定義的請(qǐng)求頭

凡是不同時(shí)滿足上面兩個(gè)條件的請(qǐng)求赂蠢，就是非簡單請(qǐng)求绪穆。

瀏覽器對(duì)這兩種請(qǐng)求的處理，是不一樣的虱岂。

簡單請(qǐng)求

基本流程

對(duì)于簡單請(qǐng)求玖院，瀏覽器會(huì)直接發(fā)出 CORS 請(qǐng)求。具體來說第岖，就是在頭信息之中难菌，自動(dòng)增加一個(gè) Origin 字段。

下面是一個(gè)例子蔑滓，瀏覽器發(fā)現(xiàn)這次跨源 AJAX 請(qǐng)求是簡單請(qǐng)求郊酒，就自動(dòng)在頭信息之中，添加一個(gè) Origin 字段键袱。

GET /api/test HTTP/1.1
Host: apidemo.test
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: */*
Origin: http://adm.test
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Referer: http://adm.test/demo
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9

在這個(gè)請(qǐng)求頭中燎窘，Origin 字段用來說明，本次請(qǐng)求來自哪個(gè)源（協(xié)議 + 域名 + 端口）蹄咖。服務(wù)器根據(jù)這個(gè)值褐健，決定是否同意這次請(qǐng)求。如果 Origin 指定的源澜汤，不在許可范圍內(nèi)蚜迅，服務(wù)器也會(huì)返回一個(gè)正常的 HTTP 響應(yīng)舵匾。

HTTP/1.1 200 OK
Date: Wed, 11 Apr 2018 20:44:38 GMT
Server: Apache/2.4.23 (Win32) OpenSSL/1.0.2j mod_fcgid/2.3.9
X-Powered-By: PHP/7.0.12
Cache-Control: no-cache, private
X-RateLimit-Limit: 60
X-RateLimit-Remaining: 59
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/json

瀏覽器發(fā)現(xiàn)，這個(gè)響應(yīng)的頭信息沒有包含 Access-Control-Allow-Origin 字段（詳見下文）慢叨，就知道出錯(cuò)了纽匙，從而拋出一個(gè)錯(cuò)誤，被 XMLHttpRequest 的 onerror 回調(diào)函數(shù)捕獲拍谐。注意烛缔，這種錯(cuò)誤無法通過狀態(tài)碼識(shí)別，因?yàn)?HTTP 響應(yīng)的狀態(tài)碼有可能是 200轩拨。如果 Origin 指定的源在許可范圍內(nèi)践瓷，服務(wù)器返回的響應(yīng)，會(huì)多出幾個(gè)頭信息字段亡蓉。

Access-Control-Allow-Origin: http://adm.test
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar

Access-Control-Allow-Origin：該字段是必須的晕翠，表示服務(wù)器允許的源。它的值要么是請(qǐng)求時(shí) Origin 字段的值砍濒；要么是一個(gè) * 淋肾，表示接受任意域名的請(qǐng)求。

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叹坦，刪除該字段即可。

Access-Control-Expose-Headers：該字段可選卑雁。CORS 請(qǐng)求時(shí)立由，XMLHttpRequest 對(duì)象的 getResponseHeader() 方法只能拿到6個(gè)基本字段：Cache-Control、Content-Language序厉、Content-Type锐膜、Expires、Last-Modified弛房、Pragma道盏。如果想拿到其他字段，就必須在 Access-Control-Expose-Headers 里面指定。上面的例子指定荷逞，getResponseHeader('FooBar') 可以返回 FooBar 字段的值媒咳。

withCredentials 屬性

上面說到，CORS 請(qǐng)求默認(rèn)不發(fā)送 Cookie 和 HTTP 認(rèn)證信息种远。如果要把 Cookie 發(fā)到服務(wù)器涩澡，一方面需要服務(wù)器同意，指定 Access-Control-Allow-Credentials 字段為 true坠敷。

Access-Control-Allow-Credentials: true

另一方面妙同，開發(fā)者必須在 AJAX 請(qǐng)求中打開 withCredentials 屬性。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

否則膝迎，即使服務(wù)器同意發(fā)送 Cookie 粥帚，瀏覽器也不會(huì)發(fā)送∠薮危或者芒涡，服務(wù)器要求設(shè)置 Cookie ，瀏覽器也不會(huì)處理卖漫。但是费尽，如果省略 withCredentials 設(shè)置，有的瀏覽器還是會(huì)一起發(fā)送 Cookie 羊始。這時(shí)旱幼，可以顯式關(guān)閉 withCredentials 。xhr.withCredentials = false;需要注意的是店枣，如果要發(fā)送 Cookie ，Access-Control-Allow-Origin 就不能設(shè)為星號(hào)叹誉，必須指定明確的鸯两、與請(qǐng)求網(wǎng)頁一致的域名。同時(shí)长豁，Cookie 依然遵循同源策略钧唐，只有用服務(wù)器域名設(shè)置的 Cookie 才會(huì)上傳，其他域名的 Cookie 并不會(huì)上傳匠襟，且（跨源）原網(wǎng)頁代碼中的 document.cookie 也無法讀取服務(wù)器域名下的 Cookie 钝侠。

簡單請(qǐng)求的跨域示例

一般來說，對(duì)于簡單請(qǐng)求酸舍，我們只需在服務(wù)器端的響應(yīng)頭添加 Access-Control-Allow-Origin 字段帅韧，就可實(shí)現(xiàn)跨域。

這里啃勉，我們修改服務(wù)器端 http://apidemo.test/api/test 的代碼：

Route::get('test', function(){
    return response()->json(['id'=>1, 'name'=>'test'])
        ->header('Access-Control-Allow-Origin', 'http://adm.test');
});

這里忽舟，我們添加的響應(yīng)頭為：

Access-Control-Allow-Origin: http://adm.test

表示只允許指定域名（http://adm.test）的請(qǐng)求；如果將 Access-Control-Allow-Origin 的值設(shè)為 * ，則表示允許所有域名的請(qǐng)求叮阅。

然后刁品，我們將客戶端網(wǎng)頁 http://adm.test/demo 的代碼，改回最初的 Ajax 請(qǐng)求方式即可浩姥。

$.get('http://apidemo.test/api/test', function(data){ console.log(data) });

非簡單請(qǐng)求

預(yù)檢請(qǐng)求

非簡單請(qǐng)求是那種對(duì)服務(wù)器有特殊要求的請(qǐng)求挑随，比如請(qǐng)求方法是 PUT 或 DELETE，或者 Content-Type 字段的類型是 application/json 勒叠。

非簡單請(qǐng)求的 CORS 請(qǐng)求兜挨，會(huì)在正式通信之前，增加一次 HTTP 查詢請(qǐng)求缴饭，稱為"預(yù)檢"請(qǐng)求（preflight）暑劝。

瀏覽器先詢問服務(wù)器，當(dāng)前網(wǎng)頁所在的域名是否在服務(wù)器的許可名單之中颗搂，以及可以使用哪些 HTTP 動(dòng)詞和頭信息字段担猛。只有得到肯定答復(fù)，瀏覽器才會(huì)發(fā)出正式的 XMLHttpRequest 請(qǐng)求丢氢，否則就報(bào)錯(cuò)傅联。

下面是客戶端網(wǎng)頁的 JavaScript 腳本。

var url = 'http://apidemo.test/api/test';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);  // 異步的 PUT 請(qǐng)求
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();     // 將請(qǐng)求發(fā)送到服務(wù)器
xhr.onreadystatechange = function (){   // 當(dāng) readyState 的值改變時(shí)疚察，callback 函數(shù)會(huì)被調(diào)用蒸走。
    if (xhr.readyState == 4 && xhr.status == 200){  // 如果請(qǐng)求成功，且狀態(tài)碼為 200
        console.log(xhr.response);
    }
}

上面代碼中貌嫡，HTTP 請(qǐng)求的方法是 PUT比驻，并且發(fā)送一個(gè)自定義頭信息X-Custom-Header。

瀏覽器發(fā)現(xiàn)岛抄，這是一個(gè)非簡單請(qǐng)求别惦，就自動(dòng)發(fā)出一個(gè)"預(yù)檢"請(qǐng)求，向服務(wù)器確認(rèn)可以這樣請(qǐng)求夫椭。下面是這個(gè)"預(yù)檢"請(qǐng)求的 HTTP 頭信息掸掸。

OPTIONS /api/test HTTP/1.1
Host: apidemo.test
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: PUT
Origin: http://adm.test
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Access-Control-Request-Headers: x-custom-header
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9

"預(yù)檢"請(qǐng)求用的請(qǐng)求方法是 OPTIONS ，表示這個(gè)請(qǐng)求是用來詢問的蹭秋。頭信息里面扰付，關(guān)鍵字段是 Origin ，表示請(qǐng)求來自哪個(gè)源仁讨。

除了 Origin 字段羽莺，"預(yù)檢"請(qǐng)求的頭信息包括兩個(gè)特殊字段。

Access-Control-Request-Method：該字段是必須的洞豁，用來列出瀏覽器的 CORS 請(qǐng)求會(huì)用到哪些 HTTP 方法禽翼，上例是 PUT 屠橄。

Access-Control-Request-Headers：該字段是一個(gè)逗號(hào)分隔的字符串，指定瀏覽器 CORS 請(qǐng)求會(huì)額外發(fā)送的頭信息字段闰挡，上例是 X-Custom-Header 锐墙。

預(yù)檢請(qǐng)求的響應(yīng)

服務(wù)器收到"預(yù)檢"請(qǐng)求以后，檢查了 Origin长酗、Access-Control-Request-Method 和 Access-Control-Request-Headers 字段以后溪北，確認(rèn)允許跨源請(qǐng)求，就會(huì)做出響應(yīng)夺脾。

假如我們的服務(wù)器端響應(yīng)頭的配置正確之拨，如下：

Access-Control-Allow-Origin: http://adm.test
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header

得到的響應(yīng)為：

HTTP/1.1 200 OK
Date: Thu, 12 Apr 2018 05:44:04 GMT
Server: Apache/2.4.23 (Win32) OpenSSL/1.0.2j mod_fcgid/2.3.9
X-Powered-By: PHP/7.0.12
Cache-Control: no-cache, private
Access-Control-Allow-Origin: http://adm.test
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header
X-RateLimit-Limit: 60
X-RateLimit-Remaining: 59
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/json

如果服務(wù)器否定了"預(yù)檢"請(qǐng)求，也會(huì)返回一個(gè)正常的 HTTP 回應(yīng)咧叭，但是缺少 CORS 相關(guān)的頭信息字段蚀乔。這時(shí)，瀏覽器就會(huì)認(rèn)定菲茬，服務(wù)器不同意預(yù)檢請(qǐng)求吉挣，因此觸發(fā)一個(gè)錯(cuò)誤，被 XMLHttpRequest 對(duì)象的 onerror 回調(diào)函數(shù)捕獲婉弹〔腔辏控制臺(tái)會(huì)打印出如下的報(bào)錯(cuò)信息。

Failed to load http://apidemo.test/api/test: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

服務(wù)器回應(yīng)的 CORS 相關(guān)字段的示例和說明：

Access-Control-Allow-Origin: http://adm.test
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

Access-Control-Allow-Origin：該字段與簡單請(qǐng)求時(shí)的含義相同镀赌。

Access-Control-Allow-Methods：該字段必需氯哮，它的值是逗號(hào)分隔的一個(gè)字符串，表明服務(wù)器支持的所有跨域請(qǐng)求的方法商佛。注意喉钢，返回的是所有支持的方法，而不單是瀏覽器請(qǐng)求的那個(gè)方法良姆。這是為了避免多次"預(yù)檢"請(qǐng)求肠虽。

Access-Control-Allow-Headers：如果瀏覽器請(qǐng)求包括 Access-Control-Request-Headers 字段，則 Access-Control-Allow-Headers 字段是必需的歇盼。它也是一個(gè)逗號(hào)分隔的字符串舔痕，表明服務(wù)器支持的所有頭信息字段评抚，不限于瀏覽器在"預(yù)檢"中請(qǐng)求的字段豹缀。

Access-Control-Allow-Credentials：該字段與簡單請(qǐng)求時(shí)的含義相同。

Access-Control-Max-Age：該字段可選慨代，用來指定本次預(yù)檢請(qǐng)求的有效期邢笙，單位為秒。上面結(jié)果中侍匙，有效期是20天（1728000秒）氮惯，即允許緩存該條回應(yīng)1728000秒（即20天）叮雳，在此期間，不用發(fā)出另一條預(yù)檢請(qǐng)求妇汗。

正常請(qǐng)求和回應(yīng)

一旦服務(wù)器通過了"預(yù)檢"請(qǐng)求帘不，瀏覽器就會(huì)繼續(xù)發(fā)送正常的 CORS 請(qǐng)求。

PUT /api/test HTTP/1.1
Host: apidemo.test
Connection: keep-alive
Content-Length: 0
Pragma: no-cache
Cache-Control: no-cache
Origin: http://adm.test
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
X-Custom-Header: value
Accept: */*
Referer: http://adm.test/demo
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9

非簡單請(qǐng)求的跨域示例

一般來說杨箭，非簡單請(qǐng)求要想實(shí)現(xiàn)跨域寞焙，只需在服務(wù)器端添加 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods，這兩個(gè)響應(yīng)頭即可互婿。

但是捣郊，假如客戶端想要發(fā)送自定義的請(qǐng)求頭，比如 API 認(rèn)證的 token 信息慈参。

Authorization: Bearer token01pokwljgh

或者 CSRF 令牌呛牲。

X-CSRF-TOKEN: pohhhhjkhljgugyug4654

注：上面兩個(gè)請(qǐng)求頭，是請(qǐng)求 API 接口時(shí)驮配，常用到的字段娘扩。

那么，服務(wù)器端的響應(yīng)就還需要添加 Access-Control-Allow-Headers 字段僧凤。

下面是一個(gè)具體的示例：

客戶端網(wǎng)頁 http://adm.test/demo 的代碼：

<script>
    $.ajax({
        url: 'http://apidemo.test/api/test',
        type: 'put',
        dataType: 'json',
        headers: {
            'Authorization': 'Bearer token01pokwljgh',
            'X-CSRF-TOKEN': 'pohhhhjkhljgugyug4654'
        },
        success: function(data){
            console.log(data);
        }
    });
</script>

服務(wù)器端 http://apidemo.test/api/test 的代碼：

Route::any('test', function(\Illuminate\Http\Request $request){
    $data = ['id'=>1, 'name'=>'test'];
 
    // 獲取請(qǐng)求頭中字段的值
    $api_token = $request->header('Authorization');
    $csrf_token = $request->header('X-CSRF-TOKEN');
 
    $data['api_token'] = $api_token;
    $data['csrf_token'] = $csrf_token;
 
    return response()->json($data)
        ->header('Access-Control-Allow-Origin', 'http://adm.test')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, OPTIONS')
        ->header('Access-Control-Allow-Headers', 'Authorization, X-CSRF-TOKEN');
});

跨域成功后畜侦，控制臺(tái)的打印結(jié)果為：

{id: 1, name: "test", api_token: "Bearer token01pokwljgh", csrf_token: "pohhhhjkhljgugyug4654"}

CORS VS. JSONP

CORS 和 JSONP，都能實(shí)現(xiàn) Ajax 的跨域請(qǐng)求躯保，但 CORS 更強(qiáng)大旋膳。
JSONP 的優(yōu)勢(shì)在于支持老式瀏覽器，以及可以向不支持 CORS 的網(wǎng)站請(qǐng)求數(shù)據(jù)途事。
JSONP 只支持 GET 請(qǐng)求验懊，CORS 支持所有類型的 HTTP 請(qǐng)求。

推薦優(yōu)先使用 CORS尸变。

--------------------- 本文來自 lamp_yang_3533 的CSDN 博客义图，全文地址請(qǐng)點(diǎn)擊：https://blog.csdn.net/lamp_yang_3533/article/details/79944441?utm_source=copy

最后編輯于：2018.09.30 16:35:50

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市召烂，隨后出現(xiàn)的幾起案子碱工，更是在濱河造成了極大的恐慌，老刑警劉巖奏夫，帶你破解...
沈念sama閱讀 207,113評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件怕篷，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡酗昼，警方通過查閱死者的電腦和手機(jī)廊谓，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,644評(píng)論 2贊 381
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來麻削，“玉大人蒸痹，你說我怎么就攤上這事春弥。” “怎么了叠荠？”我有些...
開封第一講書人閱讀 153,340評(píng)論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵匿沛，是天一觀的道長。經(jīng)常有香客問我榛鼎，道長俺祠，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 55,449評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任借帘，我火速辦了婚禮蜘渣，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘肺然。我一直安慰自己蔫缸，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 64,445評(píng)論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布际起。她就那樣靜靜地躺著拾碌，像睡著了一般。火紅的嫁衣襯著肌膚如雪街望。梳的紋絲不亂的頭發(fā)上校翔，一...
開封第一講書人閱讀 49,166評(píng)論 1贊 284
城市分裂傳說
那天，我揣著相機(jī)與錄音灾前，去河邊找鬼防症。笑死，一個(gè)胖子當(dāng)著我的面吹牛哎甲，可吹牛的內(nèi)容都是我干的蔫敲。我是一名探鬼主播，決...
沈念sama閱讀 38,442評(píng)論 3贊 401
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼炭玫，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼奈嘿！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起吞加，我...
開封第一講書人閱讀 37,105評(píng)論 0贊 261
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤裙犹，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后衔憨，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體叶圃，經(jīng)...
沈念sama閱讀 43,601評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,066評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年巫财，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了盗似。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哩陕。...
茶點(diǎn)故事閱讀 38,161評(píng)論 1贊 334
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡平项，死狀恐怖赫舒，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情闽瓢，我是刑警寧澤接癌，帶...
沈念sama閱讀 33,792評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站扣讼，受9級(jí)特大地震影響缺猛，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜椭符，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,351評(píng)論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一荔燎、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧销钝，春花似錦有咨、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,352評(píng)論 0贊 19
一樁弒父案座享，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至似忧，卻和暖如春渣叛，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背盯捌。一陣腳步聲響...
開封第一講書人閱讀 31,584評(píng)論 1贊 261
情欲美人皮
我被黑心中介騙來泰國打工淳衙，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人饺著。一個(gè)月前我還...
沈念sama閱讀 45,618評(píng)論 2贊 355
代替公主和親
正文我出身青樓滤祖，卻偏偏與公主長得像，于是被迫代替她去往敵國和親瓶籽。傳聞我的和親對(duì)象是個(gè)殘疾皇子匠童，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,916評(píng)論 2贊 344