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