CORS策略阻止:飞行前响应中的访问控制允许标头不允许请求标头字段访问控制允许方法

Question

async onSubmit(e) {
e.preventDefault();
axios.post('http://127.0.0.1:8000/auth/token/login',{
email:this.state.email,
password:this.state.password,
}).then(res => {
localStorage.setItem('token', JSON.stringify(res.data));
this.props.history.push('/protcted')
});
console.log("resgister!");
// console.log(resd.json());

}

异步组件DidMount((｛

if (!this.state.logged_in) {
this.props.history.push('./login')
}
console.log(user));
if (this.state.logged_in) {
fetch('http://localhost:8000/auth/users/me', {
method: 'GET',
headers: {
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, 
Accept, Authorization",
"Access-Control-Allow-Methods": "*",
"Authorization": `Token ${localStorage.getItem('token')}`,
"Content-Type": 'application/x-www-form-urlencoded',
"withCredentials": true,
"Access-Control-Allow-Origin":"*",
'X-Requested-With': 'XMLHttpRequest'

}
})
.then(res => JSON.stringify(res.data))
.then(json => {
this.setState({ username: json.username });
});
}

}

settings.py

INSTALLED_APPS = [
'authapp',
'rest_framework',
'djoser',
'rest_framework.authtoken',
'corsheaders',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',

]

MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

CORS_ORIGIN_ALLOW_ALL = True

在此处输入图像描述

注册完成，使用这个localhost URL，但登录无法工作。在这个onSubmit方法中，完全工作的令牌确实存储在localStorage中，但我试图用这个令牌进行身份验证，我得到了这个错误。

惊喜是我的请求http://localhost:8000/auth/users/mePostman中的这个URL，然后我得到数据

你可以在给定的链接中看到这张照片

在此处输入图像描述

Answer 1

django-cors-headers中允许的默认标头列表不包括access-control-allow-headers。

Access-Control-Allow-Origin、Access-Control-Expose-Headers、Access-Control-Max-Age、Access-Control-Allow-Credentials、Access-Control-Allow-Methods和Access-Control-Allow-Headers是可以针对访问控制请求发送回的HTTP头。

请求应该没有它们。此外，credentials选项应在fetchinit选项中配置为自己的条目，以允许将cookie发送到其他域。

headers: {
"Authorization": `Token ${localStorage.getItem('token')}`,
"Content-Type": 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'   
},
credentials: 'include'