如何实现 Ajax 的跨域访问2018-09-30

简介

由于受浏览器的同源策略（same-origin policy）的影响， Ajax 请求默认只能在同一域名下进行访问。

同源策略是浏览器安全的基石，所有的浏览器都实行了这个策略。

同源策略

同源策略是指三个相同：

协议相同（比如，都是 http）
域名相同（比如，都是 www.example.com）
端口相同（比如，都是 80 端口）

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取用户的数据。

如果非同源，共有三种行为受到限制：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM 无法获得
AJAX 请求不能发送

下面，我们只讲述 AJAX 请求如何规避同源策略的影响。

Ajax 的跨域场景描述

这里，我先描述一下 Ajax 的跨域场景。

在网站 http://apidemo.test ，有一个 API 接口，http://apidemo.test/api/test 。它的路由为：

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

在本网站的某个页面，也就是同源的情况下，执行的 Ajax 请求为：

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

可以得到正确的 json 响应：

{id: 1, name: "test"}

但是，现在如果要从另外一个网站（http://adm.test）的某个页面（ http://adm.test/demo ），发送 Ajax 请求到 http://apidemo.test/api/test

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

就属于 Ajax 的跨域问题，由于不同源，所以会报错：

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.

实现 Ajax 的跨域访问

同源政策规定，AJAX 请求只能发给同源的网址，否则就报错。

除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），还有三种方法规避这个限制。

WebSocket
JSONP
CORS

WebSocket

WebSocket 是一种通信协议，使用 ws://（非加密）和 wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持 WebSocket ，就可以通过它进行跨源通信。

由于 WebSocket 很少用到，故这里不作讲述。感兴趣的可自行参考：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。

JSONP （JSON with Padding）是 JSON 的一种“使用模式”，可用于解决浏览器的跨域数据访问的问题。

JSONP 的基本思想是：

服务器端返回的数据格式是一段可在客户端执行的 javascript 代码，形如：callback_name(json_data)
客户端获取该 jsonp 数据，并自动执行回调函数。

这种使用模式就是所谓的 JSONP。用 JSONP 抓到的数据并不是 JSON，而是任意的 JavaScript。

首先，我们修改服务器端 http://apidemo.test/api/test 返回的数据内容：

Route::get('test', function(){
    $callback = $_REQUEST['callback'];  // 获取回调函数名
    $json_data = json_encode(['id'=>1, 'name'=>'test']);
    return $callback . "(" . $json_data . ")";  // 输出 jsonp 格式的数据
});

然后，修改客户端 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>

这样，就实现了 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>

其实，客户端的 jsonp 写法还有很多。

注：只有当客户端的写法是第一种时，才需要在客户端显式的的定义回调函数。

我们可以发现，服务器器端返回的 jsonp 数据内容其实是：

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

如果客户端写法不是第一种，服务器端返回的是：

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

格式为：callback_name(json_data)

也就是说，服务器端返回的 jsonp 其实就是：回调函数的调用，参数是我们要返回的 json 数据。

注：如果客户端没有显式地指定回调函数的名称，会自动生成一个随机的名称，传递给服务器端。

JSONP 的缺点是只能发送 GET 请求。

CORS

CORS 是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，是跨源 AJAX 请求的根本解决方法。

相比 JSONP 只能发 GET 请求，CORS 允许任何类型的请求。

强烈推荐使用 CORS 。

CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。

整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

实现 CORS 通信的关键是服务器。只要服务器实现了 CORS ，就可以跨源通信。

两种请求

浏览器将 CORS 请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时满足以下两大条件，就是简单请求。

（1）请求方法是以下三种方法之一：

HEAD
GET
POST

（2）HTTP 的请求头信息的特征：

Content-Type：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain
没有添加自定义的请求头

凡是不同时满足上面两个条件的请求，就是非简单请求。

浏览器对这两种请求的处理，是不一样的。

简单请求

基本流程

对于简单请求，浏览器会直接发出 CORS 请求。具体来说，就是在头信息之中，自动增加一个 Origin 字段。

下面是一个例子，浏览器发现这次跨源 AJAX 请求是简单请求，就自动在头信息之中，添加一个 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

在这个请求头中，Origin 字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。如果 Origin 指定的源，不在许可范围内，服务器也会返回一个正常的 HTTP 响应。

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

浏览器发现，这个响应的头信息没有包含 Access-Control-Allow-Origin 字段（详见下文），就知道出错了，从而抛出一个错误，被 XMLHttpRequest 的 onerror 回调函数捕获。注意，这种错误无法通过状态码识别，因为 HTTP 响应的状态码有可能是 200。如果 Origin 指定的源在许可范围内，服务器返回的响应，会多出几个头信息字段。

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

Access-Control-Allow-Origin：该字段是必须的，表示服务器允许的源。它的值要么是请求时 Origin 字段的值；要么是一个 * ，表示接受任意域名的请求。

Access-Control-Allow-Credentials：该字段可选。它的值是一个布尔值，表示是否允许发送 Cookie。默认情况下，Cookie 不包括在 CORS 请求之中。设为true，即表示服务器明确许可，Cookie 可以包含在请求中，一起发给服务器。这个值也只能设为 true，如果服务器不要浏览器发送 Cookie，删除该字段即可。

Access-Control-Expose-Headers：该字段可选。CORS 请求时，XMLHttpRequest 对象的 getResponseHeader() 方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在 Access-Control-Expose-Headers 里面指定。上面的例子指定，getResponseHeader('FooBar') 可以返回 FooBar 字段的值。

withCredentials 属性

上面说到，CORS 请求默认不发送 Cookie 和 HTTP 认证信息。如果要把 Cookie 发到服务器，一方面需要服务器同意，指定 Access-Control-Allow-Credentials 字段为 true。

Access-Control-Allow-Credentials: true

另一方面，开发者必须在 AJAX 请求中打开 withCredentials 属性。

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

否则，即使服务器同意发送 Cookie ，浏览器也不会发送。或者，服务器要求设置 Cookie ，浏览器也不会处理。但是，如果省略 withCredentials 设置，有的浏览器还是会一起发送 Cookie 。这时，可以显式关闭 withCredentials 。xhr.withCredentials = false;需要注意的是，如果要发送 Cookie ，Access-Control-Allow-Origin 就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie 依然遵循同源策略，只有用服务器域名设置的 Cookie 才会上传，其他域名的 Cookie 并不会上传，且（跨源）原网页代码中的 document.cookie 也无法读取服务器域名下的 Cookie 。

简单请求的跨域示例

一般来说，对于简单请求，我们只需在服务器端的响应头添加 Access-Control-Allow-Origin 字段，就可实现跨域。

这里，我们修改服务器端 http://apidemo.test/api/test 的代码：

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

这里，我们添加的响应头为：

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

表示只允许指定域名（http://adm.test）的请求；如果将 Access-Control-Allow-Origin 的值设为 * ，则表示允许所有域名的请求。

然后，我们将客户端网页 http://adm.test/demo 的代码，改回最初的 Ajax 请求方式即可。

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

非简单请求

预检请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是 PUT 或 DELETE，或者 Content-Type 字段的类型是 application/json 。

非简单请求的 CORS 请求，会在正式通信之前，增加一次 HTTP 查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些 HTTP 动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的 XMLHttpRequest 请求，否则就报错。

下面是客户端网页的 JavaScript 脚本。

var url = 'http://apidemo.test/api/test';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);  // 异步的 PUT 请求
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();     // 将请求发送到服务器
xhr.onreadystatechange = function (){   // 当 readyState 的值改变时，callback 函数会被调用。
    if (xhr.readyState == 4 && xhr.status == 200){  // 如果请求成功，且状态码为 200
        console.log(xhr.response);
    }
}

上面代码中，HTTP 请求的方法是 PUT，并且发送一个自定义头信息X-Custom-Header。

浏览器发现，这是一个非简单请求，就自动发出一个"预检"请求，向服务器确认可以这样请求。下面是这个"预检"请求的 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

"预检"请求用的请求方法是 OPTIONS ，表示这个请求是用来询问的。头信息里面，关键字段是 Origin ，表示请求来自哪个源。

除了 Origin 字段，"预检"请求的头信息包括两个特殊字段。

Access-Control-Request-Method：该字段是必须的，用来列出浏览器的 CORS 请求会用到哪些 HTTP 方法，上例是 PUT 。

Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器 CORS 请求会额外发送的头信息字段，上例是 X-Custom-Header 。

预检请求的响应

服务器收到"预检"请求以后，检查了 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers 字段以后，确认允许跨源请求，就会做出响应。

假如我们的服务器端响应头的配置正确，如下：

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

得到的响应为：

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

如果服务器否定了"预检"请求，也会返回一个正常的 HTTP 回应，但是缺少 CORS 相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被 XMLHttpRequest 对象的 onerror 回调函数捕获。控制台会打印出如下的报错信息。

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.

服务器回应的 CORS 相关字段的示例和说明：

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：该字段与简单请求时的含义相同。

Access-Control-Allow-Methods：该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

Access-Control-Allow-Headers：如果浏览器请求包括 Access-Control-Request-Headers 字段，则 Access-Control-Allow-Headers 字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

Access-Control-Allow-Credentials：该字段与简单请求时的含义相同。

Access-Control-Max-Age：该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

正常请求和回应

一旦服务器通过了"预检"请求，浏览器就会继续发送正常的 CORS 请求。

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

非简单请求的跨域示例

一般来说，非简单请求要想实现跨域，只需在服务器端添加 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods，这两个响应头即可。

但是，假如客户端想要发送自定义的请求头，比如 API 认证的 token 信息。

Authorization: Bearer token01pokwljgh

或者 CSRF 令牌。

X-CSRF-TOKEN: pohhhhjkhljgugyug4654

注：上面两个请求头，是请求 API 接口时，常用到的字段。

那么，服务器端的响应就还需要添加 Access-Control-Allow-Headers 字段。

下面是一个具体的示例：

客户端网页 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>

服务器端 http://apidemo.test/api/test 的代码：

Route::any('test', function(\Illuminate\Http\Request $request){
    $data = ['id'=>1, 'name'=>'test'];
 
    // 获取请求头中字段的值
    $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');
});

跨域成功后，控制台的打印结果为：

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

CORS VS. JSONP

CORS 和 JSONP，都能实现 Ajax 的跨域请求，但 CORS 更强大。
JSONP 的优势在于支持老式浏览器，以及可以向不支持 CORS 的网站请求数据。
JSONP 只支持 GET 请求，CORS 支持所有类型的 HTTP 请求。

推荐优先使用 CORS。

--------------------- 本文来自 lamp_yang_3533 的CSDN 博客，全文地址请点击：https://blog.csdn.net/lamp_yang_3533/article/details/79944441?utm_source=copy

最后编辑于：2018.09.30 16:35:50

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,294评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,493评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,790评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,595评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,718评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,906评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,053评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,797评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,250评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,570评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,711评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,388评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,018评论 3赞 316
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,796评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,023评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,461评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,595评论 2赞 350