vue请求带上token（axios+vue 请求时如何携带cookie）

axios+vue 请求时如何携带cookie 1 
    
    
    
    
，当符合同源策略时
     


     


     


     


   ，可以直接设置 document.cookie = " 你要设置的内容 "

mounted() { document.cookie = "ioiopipoadiasdasdbasdbas"; // 非跨域传递cookie 直接设置cookie即可 this.getData(); //请求的方法 }, methods: { async getData() { let data = await axios.get(/data.json, { params: { id: 1, }, } }, },

此时：可以直接向服务端传递cookie 




 




 




 




 

，无需设置    
    
    
    
   。

2 

   

   

   

   

，当出现跨域请求的时候

默认情况下：跨域请求不会携带cookie
     

     

     

     

  ，所以 要添加 withCredentials: true 配置

注意：这种情况下稍微复杂  




  




  




  




  
，但是对于前端而言 


  


  


  


  


，只需要写上 withCredentials: true 该配置即可

当然在此之前还有 document.cookie = “ioiopipoadiasdasdbasdbas    
    
    
    
   ”; 这行代码
     
     
     
     
 ，你需要设置一个cookie   




   




   




   




   ，才可以传给服务端  


     


     


     


     

。 document.cookie = “ioiopipoadiasdasdbasdbas  


     


     


     


     

” let data2 = await this.$axios.get("http://localhost:9000/select", { withCredentials: true, //设置跨域的时候传递cookie 



 



 



 



 



，需要服务端的配合 }); console.log(data2, "data2");

此时：一定需要后端的配合                    ，不然浏览器会爆出一些错误
    




    




    




    




    ，导致请求失败


 




 




 




 




。 后端代码以node.js为例： 在响应头中添加以下几个字段

res.header(Access-Control-Allow-Credentials, true) //当客户端跨域并需要传递cookie时























，需要设置Access-Control-Allow-Credentials                     ，并且值为“true


 




 




 




 




” 代表是否向页面暴露cookie // 指定允许的跨域请求字段   

   

   

   

  。 res.header( Access-Control-Allow-Headers, token,Content-Type,Content-Length, Authorization, Accept,X-Requested-With,domain,zdy //当客户端跨域并需要传递cookie时
     



     



     



     



    ，需要设置Access-Control-Allow-Headers






















，并且值为不能为“*   

   

   

   

  ” 
    
    
    
    
，需要具体配置 代表允许上传的请求头字段 ) // 指定允许的跨域请求的来源   

     

     

     

     
。填写星号（*）表示全部域名；您也可以填写完整域名
     


     


     


     


   ，例如http://www.aliyun.com



  




  




  




  




。 res.header(Access-Control-Allow-Origin, http://localhost:8082) //当客户端跨域并需要传递cookie时 




 




 




 




 

，需要设置Access-Control-Allow-Origin 

   

   

   

   

，并且值为不能为“*   

     

     

     

     
”
     

     

     

     

  ，需要具体配置 // 指定允许的跨域请求方法  


  


  


  


 。可同时设置多个方法  




  




  




  




  
，多个方法用英文逗号（,）分隔    
     
     
     
     。 res.header(Access-Control-Allow-Methods, PUT,POST,GET,DELETE,OPTIONS)

也就是说 


  


  


  


  


，不管后端是什么语言
     
     
     
     
 ，需要返回以上四个响应头字段   




   




   




   




   ，如下所示 



 



 



 



 



，跨域状态下                    ，cookie已经传递成功

值得强调的是：Access-Control-Allow-Origin    
    
    
    
   、Access-Control-Allow-Headers 两个字段一定不要设置为 “*



  




  




  




  




”
    




    




    




    




    ， 否则也会失败




   




   




   




   




。 此时























，请设置具体配置                     ， 这是一个坑
     



     



     



     



    ，查阅资料得知






















，部分浏览器对 * 的兼容性不好 
    
    
    
    
，有的说法解释说 Access-Control-Allow-Credentials’：‘true’ 该字段会影响 * 的解析
     


     


     


     


   ，导致报错 



 



 



 



。

以上就是我对 axios携带 cookie的一些尝试                         。 如有不妥 




 




 




 




 

，请指出 

   

   

   

   

，希望对各位有所帮助
     

     

     

     

  ，共勉!!!