AJAX 跨域 CORS 解决方案

本篇文章由：http://xinpure.com/solutions-for-cross-domain-ajax-cors/

两种跨域方法

在 Javascript 中跨域访问是比较常见的事情

就像现在比较流行写单页应用，而单页应用在访问 API 的时候就会有跨域的问题

要解决跨域的问题，其实也并不复杂，有两种方案可以选择

1. Jsonp 跨域

Jsonp 的实现原理就是：创建一个回调函数，然后在远程服务上调用这个函数并且将 JSON 数据形式作为参数传递，完成回调。

1. CORS（跨域资源共享）

跨源资源共享标准通过新增一系列 HTTP 头，让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。

对于 GET 以外的 HTTP 方法，或者搭配某些 MIME 类型的 POST 请求，如：PUT 或者 DELETE 等，

以及如果自定义了请求头的话，浏览器必须先以 OPTIONS 请求方式发送一个预请求 (Preflight Request)，

从而获知服务器端对跨域请求所支持的 HTTP 方法，确认了服务器端允许该跨域请求的情况下，以实际的 HTTP 请求方法发送真正的请求。

跨域方法的选择

Jsonp 跨域方式，兼容性更好，如果需要兼容旧浏览器的话，可以考虑使用，但是这种方法不支持自定义请求头 (Request Headers)

不过，对于访问 API ，通常都是需要验证 Token 的，而 Token 都是需要放到请求头上的

所以对于正在写的一个单页应用，我选择了 CORS

CORS 跨域方式，兼容性其实也不差，至少可以兼容到 IE8 IE9，

兼容 IE8 IE9，需要使用 XDomainRequest 代替 XMLHttpRequests

这个是完全可以接受的

跨域的具体应用

使用 CORS，其实主要都是服务器端的配置，都是设置一系列的响应头 (Response Headers)

```
    Access-Control-Allow-Origin:  http://www.YOURDOMAIN.com             // 设置允许请求的域名，多个域名以逗号分隔

    Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS       // 设置允许请求的方法，多个方法以逗号分隔

    Access-Control-Allow-Headers: Authorization                         // 设置允许请求自定义的请求头字段，多个字段以逗号分隔

    Access-Control-Allow-Credentials: true                              // 设置是否允许发送 Cookies
```

服务端以 PHP 为例：

```

   <?php
        header('Access-Control-Allow-Origin: http://www.YOURDOMAIN.com');

        header('Access-Control-Allow-Credentials: true');                           //可选

        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');

        header('Access-Control-Allow-Headers: Authorization');

        // 判断如果是 OPTIONS 请求，直接退出即可
        if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
            exit;
        }

        echo json_encode(array('status' => '1', 'data' => ''));
   ?>

```

Javascript 代码直接使用 Ajax 即可：

```
    $.ajax({
        url: aURL,
        type: aMethod,
        data: aParams,
        dataType: 'json',
        timeout: 1000 * 120,
        beforeSend: function (xhr) {
            var token = $.cookie('token');
            if (token) {
                xhr.setRequestHeader('Authorization', 'Bearer ' + token);
            }
        },
        success: function (response) {
            if (response.code == 200) {
                typeof aSuccess == 'function' && aSuccess(response.data);
            } else {
                typeof aError == 'function' && aError(response.message);
            }
        },
        error: function(xhr, type){
            typeof aError == 'function' && aError(xhr.status + ' '  + xhr.statusText);
        }
    });
```

参考链接

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

http://www.html5rocks.com/en/tutorials/cors/

https://zinoui.com/blog/cross-domain-ajax-request