Vue.js post请求cookies小问题
前言
对于很多从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请求问题就解决了。