基本概念部分(一):理解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的开发者工具中会看到这个一串请求行:
OPTIONS /cors HTTP/1.1
对于这一点的应用我的项目中主要是当 Content-Type 为 application/json的时候,其他的put或者delete也会有这样的请求方式。
总的来说只是一个对CORS的梳理,并没有很细致的解释。它与JSONP的不同为JSONP只有get请求可以跨域,而CORS支持所有的请求方式。虽然JSONP对老的浏览器支持比较好,但现在开发项目的浏览器大多较新,我也就更多的关注了CORS。
基本概念部分(二):理解 form data 和 request payload
在W3C中,<form>标签的enctype属性规定了表单信息在发送到服务器之前,应该如何对数据进行编码。而且编码的格式由它的三个属性值决定:
application/x-www-form-urlencoded //在发送前编码所有字符(默认) multipart/form-data //不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。 text/plain //空格转换为 "+" 加号,但不对特殊字符编码。
在普通的HTTP POST请求中,Content-Type 为 application/x-www-form-urlencoded,参数是在请求体中。即在请求的Form Data中。
而如果使用原生的AJAX POST请求,请求的 Content-Type 为 text/plain;charset=UTF-8 ,并且请求的参数在Request Payload中。
因此:在使用原生的AJAX POST请求时,要明确设置请求头的Content-Type属性值。(其实我很想知道如果我就放在Request Payload中,服务器是拿不到数据吗?)
在我开发过程中响应头headers中的Content-Type较为常用的有三个值(其实常用的不只有这三个):
1.application/x-www-form-urlencoded:这个值是form表单的默认属性的属性值,而且JQuery的AJAX的Content-Type默认值也是这个。
2.multipart/form-data:在使用表单上传文件的时候,enctype一定要用到这个属性值。详细的请问度娘。
3.application/ json:这个值我经常用到,因为我们的后台工程师需要我传JSON给他。这个属性值告诉服务器,此次请求的消息主体是JSON的格式。此前在AngularJs项目中也有见过,它的AJAX请求默认的就是JSON字符串。并且JSON 格式支持比键值对复杂得多的结构化数据(那种层级很深的想想都蛋疼)。
本文原文出自MINGXINICE的博客:http://www.cnblogs.com/mingxinice/p/vue-ajax-cors.html
正题:Vue中应用CORS实现AJAX跨域
ok终于把基础知识梳理完了,下面我就要开始说Vue中对CORS的应用,以及它如何设置它的参数放在哪里了。
在Vue中想实现与后台的数据交互,缺少不了vue-resource模块。就像jQuery里的$.ajax,用来和后端交互数据的。
正是vue-resource应用到了W3C中的新特性CORS。目前大部分的浏览器都已经支持 XMLHttpRequest2 对象用于在后台与服务器交换数据。
但是在Vue中提交AJAX跨域请求时,我们人需要知道当前浏览器是否支持 XMLHttpRequest2。判断的方法是使用in操作检测当前XMLHttpRequest示例对象是否包含withCredentials属性,如果包含则支持CORS(因为withCredentials属性是XMLHttpRequest对象独有的,且如上文说,它是跨域传输Cookie和HTTP认证信息的关键)。
var xhrCors = 'withCredentials' in new XMLHttpRequest()
在支持CORS的情况下,还需要服务器启用CORS支持。
如果我们想从http://example.com域中提交请求到http://crossdimain.com域,那么需要在crossdomain.com域中添加如下请求头:
Access-Control-Allow-Origin : http://example.com
如果crossdomian.com要允许所有异域都可以AJAX请求该域资源,则添加如下响应头:
Access-Control-Allow-Origin : *
这样服务器开启CORS支持后,在浏览器中就可以像提交普通的AJAX请求一样,提交跨域请求了。
而真正知道这些后,在应用到开发环境中还会发现一个小坑:这个$http请求并不像jquery的ajax一样,这里的post的data默认不是以form data的形式,而是request payload。(根据上述研究,可以判断Vue的AJAX请求,很可能是以原生的方式,这里小生纯属猜测)
在学习了上述的基础知识后,才发现这个小坑很好解决。我们只需要把请求头的 Content-Type 值设置为 application/x-www-form-urlencoded 即可。我的项目代码如下:
this.$http.post( 'https://zmx.mxorz.com/user/userCenter', { usertId: usertId }, { 'headers': { 'Content-Type': 'application/x-www-form-urlencoded' } } ).then(function(res) { }, function(res) { })
但是还有一种方法,是直接设置 emulateJSON 属性为 true。感觉这个放方法的易用性更强。我的项目代码如下:
this.$http.post( 'https://zmx.mxorz.com/user/userCenter', { usertId: usertId }, { emulateJSON:true }, { 'headers': { 'Content-Type': 'application/json' } } ).then(function(res) { }, function(res) { })
具体的梳理只有这么多,对Vue的各方面理解并不是很细致,望各位大佬多多提点~