参考链接

简单请求

只使用 “GET”, “HEAD” 或者 “POST” 请求方法。如果使用 “POST” 向服务器端传送数据，则数据类型 “Content-Type” 只能是 “application/x-www-form-urlencoded”, “multipart/form-data” 或 “text/plain” 中的一种。

不会使用自定义请求头（类似于 X-Modified 这种）

预检请求

直接 POST Content-Type 类型为 “application/json” 时，可能会出现下面的错误信息。

XMLHttpRequest cannot load http://xxx.com/api/test.
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

与前述简单请求不同，”需预检的请求” 要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。”预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

附带凭证信息的请求

一般而言，对于跨站请求，浏览器是不会发送凭证信息的。但如果将 XMLHttpRequest 的一个特殊标志位设置为 true，浏览器就将允许该请求的发送。

于是，如果想要把 Cookie 带上，前端和后端都需要做相应支持。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 前端，在 xhrFields 中 加入 withCredentials 字段
$.ajax({
    type: "POST",
    url: 'http://b.xxx.com/api/test',
    xhrFields: {
        withCredentials: true
    },
    success: function (responseObject) {
        document.write(responseObject);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        document.write(errorThrown);
    }
});

// 给一个带有 withCredentials 的请求发送响应的时候，服务器端必须指定允许请求的域名，不能使用'*'.
// PHP 示例
header('Access-Control-Allow-Origin: http://a.xxx.com');
header('Access-Control-Allow-Credentials: true');

此处注意，对 http://b.xxx.com/api/test 进行异步请求时，浏览器并不会将 a.xxx.com 域下的 Cookie 发送出去，无论是异步请求还是直接请求，对浏览器而言，发送 Cookie、包括服务端返回的 setCookie 操作功能特性都是一样的。