關(guān)于axios在vue下進(jìn)行跨域請(qǐng)求無(wú)法帶上cookie的問(wèn)題

這個(gè)問(wèn)題我知道網(wǎng)上有很多人提問(wèn)，我也試了很多方法，但是還是無(wú)法找出問(wèn)題所在。。。

1、在vue中，通過(guò)axios進(jìn)行跨域請(qǐng)求，服務(wù)端返回的cookie無(wú)法設(shè)置，導(dǎo)致每次后臺(tái)都獲取新的session，無(wú)法保持登錄狀態(tài)。

服務(wù)器的地址我本機(jī)的地址

請(qǐng)求的服務(wù)為: http://172.11.4.39:8080/layout/list

vue 項(xiàng)目使用webpack http://localhost:9527

axios 版本為 0.17.1 下文單獨(dú)測(cè)試的html中axios也是一樣的版本

2、
java后端的跨域設(shè)置

 res.setContentType("text/html;charset=UTF-8");  
 res.setHeader("Access-Control-Allow-Origin", "http://localhost:9527");  
 res.setHeader("Access-Control-Allow-Credentials", "true");  
 res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
 res.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");

axios請(qǐng)求代碼：

 axios({
        url: 'http://172.11.4.39:8080/layout/list',
        method: 'post',
        transformRequest: [function (data) {
          // Do whatever you want to transform the data
          let ret = ''
          for (let it in data) {
            if (data[it] == null) continue
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret
        }],
        withCredentials: true,
        data: {
          page: 1,
          limit: 20
        }
      }).then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })

3、返回的請(qǐng)求(截圖這邊的allow-origin不太對(duì)，是因?yàn)槲医氐綔y(cè)試的圖去了，其實(shí)是跟上面寫(xiě)的9527是一樣的)
圖片描述

每次請(qǐng)求都不回帶上cookie

4、我懷疑是不是后臺(tái)跨域沒(méi)設(shè)置對(duì)，于是我自己寫(xiě)了個(gè)html，分別用jquery和axios跨域訪(fǎng)問(wèn)請(qǐng)求，在沒(méi)加上

xhrFields: {
    withCredentials: true
},

或

withCredentials: true

時(shí)，確實(shí)會(huì)不回設(shè)置cookie，但是加上后問(wèn)題確實(shí)解決了?？墒窃趘ue項(xiàng)目中就不行了。

雖然開(kāi)發(fā)時(shí)沒(méi)問(wèn)題，可以用webpack做代理，這時(shí)是可以設(shè)置cookie的，但是我打包后部署測(cè)試發(fā)現(xiàn)還是不行，還是不會(huì)設(shè)置返回的cookie。

謝謝各位幫助。

2018 03 29 更新

問(wèn)題解決了，但是提的這個(gè)問(wèn)題還是沒(méi)解決。后面是通過(guò)nginx轉(zhuǎn)發(fā)請(qǐng)求解決的，這樣服務(wù)器返回的set-cookie是有生效的。

說(shuō)回這個(gè)問(wèn)題，因?yàn)檫@個(gè)項(xiàng)目是在別人封裝elementui后的項(xiàng)目基礎(chǔ)上做的，學(xué)藝不精的我有些配置也看的不是很明白，但是我把有關(guān)axios的設(shè)置都看了一遍，也刪掉一些之前的axios設(shè)置，還是沒(méi)用。。。

最后時(shí)間趕就改成了用nginx來(lái)轉(zhuǎn)發(fā)請(qǐng)求。

最后謝謝各位的幫助。

回答

編輯回答