参考链接

简单请求

只使用 “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 操作功能特性都是一样的。