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的一些尝试                 。 如有不妥 




 




 




 ，请指出 

   

   

   
，希望对各位有所帮助
     

     

     

，共勉!!!