Vue.js post请求cookies小问题

Vue.js post请求cookies小问题

kimiku

1 人赞了该文章

前言

对于很多从vue1.0转vue2.0的初学者来说，不能用ajax来做接口请求是个很痛苦的问题,但是我们可以尝试使用vue提供的方法，这些方法也是很方便很简单的。方法在这里就不多说，这里主要是想分享一下post请求时要注意的一下小问题

大家都知道vue提供的请求方法有下面这几个

this.$http.get()、this.$http.post()、this.$http.jsonp、this.$http.put、this.$http.delete

当然也可以这样写vue.http.get()

我们使用之前是要安装vue-resource插件，vue-resource就等同于jquery的$.ajax(),而且vue-resource更简洁。

问题

当你请求的时候，你会发现cookies没有传给后台,这是为什么呢？你可以检查一下你的代码有没有加上下面这些东西

Vue.http.options.xhr = { withCredentials: true }; 的用途就是允许跨域请求携带cookie做身份认证

Vue.http.options.emulateJSON = true; 的作用是如果web服务器无法处理application/json的请求,你可以启用emulateJSON选项。启用该选项后请求会以application/x-www-form-urlencoded作为MIME type,就像普通的HTML表单一样

加上了上面的代码再次请求接口，你会发现get、jsonp是有返回cookies，但是post请求是没有返回的，你还需要加上下面的代码

Vue.http.interceptors.push((request, next) => {

request.credentials = true;

next();

});

这里的Vue.http.interceptors是拦截器，作用是可以在请求前和发送请求后做一些处理

因为跨域请求是不会提供任何凭据的(cookie、HTTP认证及客户端SSL证明等)，但是我们可以通过设置request.credentials = true;来表示允许。

加上这段代码再次用post请求问题就解决了。