Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理

基本概念部分（一）：理解CORS

说道Vue的跨域AJAX，我想先梳理一遍CORS跨域，"跨域资源共享"（Cross-origin resource sharing），它是一个W3C标准。

CORS跨域的特点：它需要服务器的‘配合’。就是说，它的实现是：浏览器（所有浏览器和IE10+）+服务器。

一般情况下，我们可以在请求头信息中加入Origin，来告知服务器自己来自哪个源：协议 + 域名 + 端口。如果Origin域名在指定许可范围内，则服务器的响应头会多出三个信息：

Access-Control-Allow-Origin:
//它的值，可以使一个 *，表示接受所有域名的请求；还可以是指定的一个域名（在请求时就已经写好的那个origin域名）。Access-Control-Allow-Credentials:
//它的值为：true。他表示是否允许发送cookie，因为cookie不包含在CORS中，只有其值设为true时，可以让Cookie包含在请求中一起发给服务器。Access-Control-Expose-Headers:
//他表示XMLHttpRequest对象的getResponseHeader()方法的六个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。（这里我用的最多的是Content-Type）

这里有一个withCredentials属性需要我们知道。

因为CORS请求默认不发送Cookie和HTTP认证信息，因此需要 Access-Control-Allow-Credentials：true; 并且专门设置AJAX请求：（这里在Vue中有应用，下面会说）

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

这样才可以让浏览器同意发送Cookie，配合服务器的需求和配置。

CORS还有一种情况是发送“预检请求”。他会在正真的数据请求之前，先发送一次HTTP请求。浏览器会先询问服务器自己的域名是否被许可，以及一些必要的头部字段信息。服务器进行回复后，浏览器再发送一次，这次是正式的 XMLHttpRequest 请求。

这里面说到的“预检”请求的方法为options方法，表示说：“我是来询问的”。因此当我们在Chrome的开发者工具中会看到这个一串请求行：

        		
网友评论