Vue3 跨域请求携带cookie操作并记录cookie

近期做的项目比较杂，涉及到前端框架的工作，遇到了许多问题，记录一下这个比较棘手的问题；
项目已有基础：
已解决跨域访问的问题，确保请求不会被屏蔽，vue项目中已经配置好了axios

axios.post('/users/', {
                        username: this.username,
                        password: this.password,
                    }, {
                        responseType: 'json',
                        withCredentials: true
                    })
                    .then(response => {
                         // 记录用户的登录状态
                        sessionStorage.clear();
                        localStorage.clear();

                        localStorage.token = response.data.token;
                        localStorage.username = response.data.username;
                        localStorage.user_id = response.data.id;

                        location.href = '/index.html';
                    })
                    .catch(error=> {
                        if (error.response.status == 400) {
                            if ('non_field_errors' in error.response.data) {
                                this.error_sms_code_message = error.response.data.non_field_errors[0];
                            } else {
                                this.error_sms_code_message = '数据有误';
                            }
                            this.error_sms_code = true;
                        } else {
                            console.log(error.response.data);
                        }
                    })