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的开发者工具中会看到这个一串请求行:

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 格式支持比键值对复杂得多的结构化数据(那种层级很深的想想都蛋疼)。

 

正题: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) {
})
 
posted @ 2018-05-15 10:42  我爱吃小丸子  阅读(398)  评论(0编辑  收藏  举报