快捷導(dǎo)航

axios+vue請(qǐng)求時(shí)攜帶cookie的方法實(shí)例

更新時(shí)間：2022年09月20日 10:07:51 作者：zhouang770377

做項(xiàng)目時(shí)遇到一個(gè)需求,后端需要在接口請(qǐng)求時(shí),對(duì)用戶登陸狀態(tài)進(jìn)行判斷,需要在請(qǐng)求時(shí)攜帶Cookie,下面這篇文章主要給大家介紹了關(guān)于axios+vue請(qǐng)求時(shí)攜帶cookie的相關(guān)資料,需要的朋友可以參考下

axios+vue 請(qǐng)求時(shí)如何攜帶cookie

1，當(dāng)符合同源策略時(shí)，可以直接設(shè)置 document.cookie = " 你要設(shè)置的內(nèi)容 "

mounted() {
    document.cookie = "ioiopipoadiasdasdbasdbas";   // 非跨域傳遞cookie 直接設(shè)置cookie即可
    this.getData();   //請(qǐng)求的方法
   
  },
  methods: {
    async getData() {
       let data = await axios.get('/data.json', {
         params: {
           id: 1,
         },
  
       }
    },
  },

此時(shí)：可以直接向服務(wù)端傳遞cookie，無需設(shè)置。

2，當(dāng)出現(xiàn)跨域請(qǐng)求的時(shí)候

默認(rèn)情況下：跨域請(qǐng)求不會(huì)攜帶cookie，所以要添加 withCredentials: true 配置

注意：這種情況下稍微復(fù)雜，但是對(duì)于前端而言，只需要寫上 withCredentials: true 該配置即可

當(dāng)然在此之前還有 document.cookie = “ioiopipoadiasdasdbasdbas”; 這行代碼，你需要設(shè)置一個(gè)cookie，才可以傳給服務(wù)端。

 document.cookie = “ioiopipoadiasdasdbasdbas”
 let data2 = await this.$axios.get("http://localhost:9000/select", {
        withCredentials: true,   //設(shè)置跨域的時(shí)候傳遞cookie，需要服務(wù)端的配合   
      });
      console.log(data2, "data2");

此時(shí)：一定需要后端的配合，不然瀏覽器會(huì)爆出一些錯(cuò)誤，導(dǎo)致請(qǐng)求失敗。

后端代碼以node.js為例：

在響應(yīng)頭中添加以下幾個(gè)字段

res.header('Access-Control-Allow-Credentials', 'true') //當(dāng)客戶端跨域并需要傳遞cookie時(shí)，需要設(shè)置Access-Control-Allow-Credentials，并且值為“true”  代表是否向頁面暴露cookie
    // 指定允許的跨域請(qǐng)求字段。
res.header(
        'Access-Control-Allow-Headers',
        'token,Content-Type,Content-Length, Authorization, Accept,X-Requested-With,domain,zdy' //當(dāng)客戶端跨域并需要傳遞cookie時(shí)，需要設(shè)置Access-Control-Allow-Headers，并且值為不能為“*”，需要具體配置  代表允許上傳的請(qǐng)求頭字段
    )
    // 指定允許的跨域請(qǐng)求的來源。填寫星號(hào)（*）表示全部域名；您也可以填寫完整域名，例如http://www.aliyun.com。
res.header('Access-Control-Allow-Origin', 'http://localhost:8082') //當(dāng)客戶端跨域并需要傳遞cookie時(shí)，需要設(shè)置Access-Control-Allow-Origin，并且值為不能為“*”，需要具體配置
    // 指定允許的跨域請(qǐng)求方法?？赏瑫r(shí)設(shè)置多個(gè)方法，多個(gè)方法用英文逗號(hào)（,）分隔。
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')

也就是說，不管后端是什么語言，需要返回以上四個(gè)響應(yīng)頭字段，如下所示，跨域狀態(tài)下，cookie已經(jīng)傳遞成功

值得強(qiáng)調(diào)的是：Access-Control-Allow-Origin、Access-Control-Allow-Headers 兩個(gè)字段一定不要設(shè)置為 “*” ，否則也會(huì)失敗。 此時(shí)，請(qǐng)?jiān)O(shè)置具體配置，這是一個(gè)坑，查閱資料得知，部分瀏覽器對(duì) * 的兼容性不好，有的說法解釋說 Access-Control-Allow-Credentials’：‘true’ 該字段會(huì)影響 * 的解析，導(dǎo)致報(bào)錯(cuò)。

以上就是我對(duì) axios攜帶 cookie的一些嘗試。

總結(jié)

到此這篇關(guān)于axios+vue請(qǐng)求時(shí)攜帶cookie的文章就介紹到這了,更多相關(guān)axios vue請(qǐng)求攜帶cookie內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: