解决：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信息过去

结语

• 最终能解决这个困扰了一天多问题，真的很激动。因而写下了这篇文章。
• 但愿大佬不吝赐教，平时只有另外一个小伙伴，两我的举步维艰。
• 有不少原理都只是猜测，没来得及查阅文献。若是有错，但愿你们指出！