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

发布时间：2017-07-21 15:48:49.943 作者： IT网络文摘 (该文来自笔记，点击查看原文)

基本概念部分（一）：理解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的各方面理解并不是很细致，望各位大佬多多提点~

平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

标签: Vue, CORS, 跨域资源共享, AJAX, form data, withCredentials, request payload

http://www.cnblogs.com/mingxinice/p/vue-ajax-cors.html

分类导航

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

延伸阅读

我想了解如何学习