vue-resource get/post請求如何攜帶cookie的問題

龍恩0707發表於2018-04-24
VueCookie

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);
    }
  })
};

相關文章