Vue在跨域请求时携带cookie的配置withCredentials: true

时间:2024-10-21 08:38:19

Vue在发起跨域请求时,后端已经开启CORS,前端需要也携带cookie,此时需要在前端请求头加上withCredentials: true,表示请求可以携带cookie,例如以下为用户注册部分代码。

axios.post(this.host + '/users/', {
                        username: this.username,
                        password: this.password,
                        password2: this.password2,
                        mobile: this.mobile,
                        sms_code: this.sms_code,
                        allow: this.allow.toString()
                    }, {
                        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 = '/';
                    })
                    .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);
                        }
                    })