vue-resource get/post请求如何携带cookie的问题

vue-resource get/post请求如何携带cookie的问题

当我们使用vue请求的时候,我们会发现请求头中没有携带cookie传给后台,我们可以在请求时添加如下代码:
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请求返回的代码会
携带cookie,但是post不会;

为了方便,我们这边是封装了一个get请求,只要在get请求添加参数 { credentials: true } 即可使用;

const ajaxGet = (url, fn) => {
  let results = null;
  Vue.http.get(url, { credentials: true }).then((response) => {
    if (response.ok) {
      results = response.body;
      fn(1, results);
    } else {
      fn(0, results);
    }
  }, (error) => {
    if (error) {
      fn(0, results);
    }
  });
};

如上只会对get请求携带cookie,但是post请求还是没有效果的,因此在post请求中,我们需要添加如下代码:

Vue.http.interceptors.push((request, next) => {
  request.credentials = true;
  next();
});

Vue.http.interceptors 是拦截器,作用是可以在请求前和发送请求后做一些处理,加上上面的代码post请求就可以解决携带cookie的问题了;
因此我们的post请求也封装了一下,在代码中会添加如上解决post请求携带cookie的问题了;如下代码:

const ajaxPost = (url, params, options, fn) => {
  let results = null;

  if (typeof options === 'function' && arguments.length <= 3) {
    fn = options;
    options = {};
  }
  Vue.http.interceptors.push((request, next) => {
    request.credentials = true;
    next();
  });
  Vue.http.post(url, params, options).then((response) => {
    if (response.ok) {
      results = response.body;
      fn(1, results);
    } else {
      fn(0, results);
    }
  }, (error) => {
    if (error) {
      fn(0, results);
    }
  })
};
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue.js 是一个 JavaScript 框架,使用它可以方便地进行前端开发。vue-resource 是 Vue.js 的一个插件,可以用来发送 HTTP 请求。 关于请求类型,vue-resource 支持 POST 和 GET 两种请求方式。使用方式如下: - GET 请求: ```javascript this.$http.get('your_api').then(response => { // success callback }, response => { // error callback }); ``` - POST 请求: ```javascript this.$http.post('your_api', { // request body }).then(response => { // success callback }, response => { // error callback }); ``` 关于请求格式,vue-resource 支持 form 和 json 两种格式。默认情况下,vue-resource 会将请求体序列化为 application/x-www-form-urlencoded 格式,如果需要发送 json 格式的请求,需要手动设置请求头: ```javascript this.$http.post('your_api', { // request body }, { headers: { 'Content-Type': 'application/json' } }).then(response => { // success callback }, response => { // error callback }); ``` ### 回答2: vue-resource 是 Vue.js 的一个插件,用于发送 HTTP 请求。在 Vue.js 中发送 POST 和 GET 请求可以使用 vue-resource 的形式处理。下面是一个例子,展示如何用 vue-resource 进行 POST 和 GET 请求,发送 Form 表单数据和 JSON 数据。 发送 POST 请求: 1. 使用 vue-resource 的 $http.post() 方法发送 POST 请求。 2. 将要发送的数据作为参数传递给 $http.post() 方法。 3. 如果要发送 Form 表单数据,可以将数据作为对象传递给 $http.post() 方法。 4. 如果要发送 JSON 数据,需要在请求头中设置 Content-Type 为 application/json,并将 JSON 数据作为字符串传递给 $http.post() 方法。 下面是使用 vue-resource 发送 POST 请求的示例: ``` js // 发送 Form 表单数据 this.$http.post('api/url', {param1: value1, param2: value2}).then((response) => { // 处理成功的回调 }).catch((error) => { // 处理失败的回调 }); // 发送 JSON 数据 let jsonData = JSON.stringify({param1: value1, param2: value2}); this.$http.post('api/url', jsonData, {headers: {'Content-Type': 'application/json'}}).then((response) => { // 处理成功的回调 }).catch((error) => { // 处理失败的回调 }); ``` 发送 GET 请求: 1. 使用 vue-resource 的 $http.get() 方法发送 GET 请求。 2. 将要发送的数据作为参数传递给 $http.get() 方法。 3. 参数可以直接拼接在 URL 中,也可以作为一个对象传递给 $http.get() 方法。 下面是使用 vue-resource 发送 GET 请求的示例: ``` js // 直接拼接参数在 URL 中 this.$http.get('api/url?param1=value1&param2=value2').then((response) => { // 处理成功的回调 }).catch((error) => { // 处理失败的回调 }); // 作为参数对象传递 this.$http.get('api/url', {params: {param1: value1, param2: value2}}).then((response) => { // 处理成功的回调 }).catch((error) => { // 处理失败的回调 }); ``` 以上就是使用 vue-resource 发送 POST 和 GET 请求时,发送 Form 表单数据和 JSON 数据的方法。 ### 回答3: Vue-resource是Vue.js官方推荐的一个用于处理网络请求的插件。使用Vue-resource可以很方便地进行post和get请求,并且可以以form和json的形式进行数据传输。 首先,我们来讲解如何进行post请求。在Vue组件中,可以通过Vue-resource的$http对象来发送post请求。要发送一个form形式的post请求,可以使用`this.$http.post(url, formData)`方法,并将form数据作为第二个参数传递进去。 例如,假设我们要向服务器端发送一个form形式的post请求,可以通过以下代码实现: ``` this.$http.post('/api/users', this.formData).then(response => { console.log(response.body); }, error => { console.error(error); }); ``` 其中,`/api/users`是请求的url,`this.formData`是包含form数据的对象。通过`then`方法可以处理请求成功和失败的情况,并且可以从`response`对象中获取到服务器返回的数据。 下面我们来看一下如何进行get请求。同样地,在Vue组件中,可以通过Vue-resource的$http对象来发送get请求。要发送一个json形式的get请求,可以使用`this.$http.get(url, {params: jsonData})`方法,并将json数据作为`params`属性传递进去。 举一个例子,如果我们需要向服务器端发送一个json形式的get请求,可以按照以下方式实现: ``` this.$http.get('/api/users', {params: {name: 'Alice', age: 25}}).then(response => { console.log(response.body); }, error => { console.error(error); }); ``` 在这个例子中,`/api/users`是请求的url,`{name: 'Alice', age: 25}`是需要传递给服务器的json数据。同样地,在`then`方法中可以处理请求成功和失败的情况,并且从`response`对象中获取到服务器返回的数据。 总之,使用Vue-resource可以轻松地发送post和get请求,并且可以自由选择传递form或json形式的数据。以上就是关于如何使用Vue-resource进行post和get请求的简要说明。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值