如何实现 Ajax 的跨域访问？

逃离我推掉我的手 2022-05-27 08:14 252阅读 0赞

## 简介 ##

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

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

### 同源策略 ###

同源策略是指三个相同：

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

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

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

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

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

## Ajax 的跨域场景描述 ##

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

在网站 [http://apidemo.test][http_apidemo.test] ，有一个 API 接口，[http://apidemo.test/api/test][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]）的某个页面（ [http://adm.test/demo][http_adm.test_demo] ），发送 Ajax 请求到 [http://apidemo.test/api/test][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:][http_apidemo.test_api_test 1] No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '[http://adm.test][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][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][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][http_adm.test_demo] 的代码：

这样，就实现了 Ajax 的跨域访问。

客户端的代码，还可以这样写：

或者

或者

其实，客户端的 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][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][http_adm.test]）的请求；如果将 Access-Control-Allow-Origin 的值设为 \* ，则表示允许所有域名的请求。

然后，我们将客户端网页 [http://adm.test/demo][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:][http_apidemo.test_api_test 1] 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

服务器端的响应是：

HTTP/1.1 200 OK
    Date: Thu, 12 Apr 2018 06:26:23 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: 48
    Keep-Alive: timeout=5, max=91
    Connection: Keep-Alive
    Transfer-Encoding: chunked
    Content-Type: application/json

##### 非简单请求的跨域示例 #####

一般来说，非简单请求要想实现跨域，只需在服务器端添加 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][http_adm.test_demo] 的代码：

服务器端 [http://apidemo.test/api/test][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。

[www.example.com]: http://www.example.com/
[http_apidemo.test]: http://apidemo.test/
[http_apidemo.test_api_test]: http://apidemo.test/api/test
[http_adm.test]: http://adm.test/
[http_adm.test_demo]: http://adm.test/demo
[http_apidemo.test_api_test 1]: http://apidemo.test/api/test:
[http_www.ruanyifeng.com_blog_2016_04_same-origin-policy.html]: http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html