解決：post請求不攜帶cookie；以及cookie的坑

原由

• 小徐和朋友決心搭建一個網站，小徐負責前端，後端的話，域名已經申請完畢，一些接口也已經作好了。小徐在本機使用vuecli開發。
• 因爲localhost和網站存在跨域，須要設置代理：proxy:"https://www.t2c.site"（坑所在，待會詳講！）

代碼部分：

<template>
    <b-img src="/user/checkCode?k=0.1" onclick="this.src='/checkCode?k='+Math.random()"></b-img>
    //account、password部分是兩個input按鈕、省略
    <button type="button" id="login-button" @click="submit">Login</button>
</template>
<script>
export default {
    data()
    {
        return{
            account:'',
            password:'',
            checkCode:''
        }
    },
    methods:{
        submit(){
            this.axios.post('/user/login', 
            {
            account: this.account,
            password: this.password,
            checkCode: this.checkCode
            },{ withCredentials:true })
            .then( (response) =>{
                console.log(response.data);
            })
            .catch( (error)=> {
                console.log(error);
            });

        }
    }
}
</script>

問題描述

• 須要post請求發送account、password、checkCode到後端，但因爲沒法攜帶cookie 驗證碼一直比對錯誤
• 已經按網上方法設置：（依舊無濟於事）

前端main.js:axios.defaults.withCredentials=true;

後端已設置：Access-Control-Allow-Credentials: true

解決方法

就是補全域名！！！

<b-img src="https://www.t2c.site/user/checkCode?k=0.1" onclick="this.src='https://www.t2c.site/checkCode?k='+Math.random()"></b-img>
 this.axios.post('https://www.t2c.site/user/login'

三個請求地址必須補全，缺一不可。

原理解析

• 這是由於cookie的domain引發，能夠看到domain在後端設置爲www.t2c.site；這規定了這個cookie只有在請求域名爲www.t2c.site時纔會被攜帶發送到後端

• 而咱們起初的的requseturl仍爲hocalhost
• 這就說明即便使用proxy代理，請求url若是不補齊的話，默認還是本地的請求
• proxy代理後雖然能訪問到驗證碼圖片，卻不會改變request url。（這裏我也沒太懂proxy代理的原理，只是猜測。若是有錯，但願大佬指出）

• 因此只要補全request url就能確保攜帶url

驗證

• 若是補全img_src和axios請求的url，就能自動識別request url，並攜帶cookie信息過去

結語

• 最終能解決這個困擾了一天多問題，真的很激動。因而寫下了這篇文章。
• 但願大佬不吝賜教，平時只有另外一個小夥伴，兩我的舉步維艱。
• 有不少原理都只是猜測，沒來得及查閱文獻。若是有錯，但願你們指出！