这里的新手：(
在Django后端和React的教程之后，我试图了解JWT身份验证。https://hackernoon.com/110percent-complete-jwt-authentication-with-django-and-react-2020-iejq34ta。
我以前通过在线搜索解决了本教程中的许多意外错误，但现在我找不到解决方案。
我正在使用Axios进行请求和令牌的第一步，来自教程：
">我们想使用Axios用于：POSTing to/api/user/create/to create a userPOSTing to/api/token/get/to登录用户并获得JWT令牌对POSTing to/api/togen/refresh/to刷新JWT令牌配对GETING from the protected/api/hello/to see the backend have secret to say"；
基于教程的预期行为在上(图1(：
预期行为：图像1
但在npm run build命令python manage.py runserver命令之后，我试图登录系统，在firefox控制台上出现了这个错误(图2(
firefox控制台错误：图像2
此外，在Django控制台上，我得到了"OPTIONS /api/token/obtain/ HTTP/1.1" 200 372而不是"POST /api/token/obtain/ HTTP/1.1" 200 491。
我在本节教程中使用的文件是：
// djsr/frontend/src/axiosApi.js
import axios from 'axios'
const axiosInstance = axios.create({
baseURL: 'http://127.0.0.1:8000/api/',
timeout: 5000,
headers: {
'Access-Control-Allow-Origin': '*'
'Authorization': "JWT " + localStorage.getItem('access_token'),
'Content-Type': 'application/json',
'accept': 'application/json'
}
});
export default axiosInstance;
注意：我在网上发现我应该把'Access-Control-Allow-Origin': '*'放在djsr/frontend/src/axiosApi.js的头上，但没有发生任何事情
和：
// djsr/frontend/src/components/login.js
import React, { Component } from "react";
import axiosInstance from "../axiosApi";
class Login extends Component {
constructor(props) {
super(props);
this.state = {username: "", password: ""};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({[event.target.name]: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
try {
const response = axiosInstance.post('/token/obtain/', {
username: this.state.username,
password: this.state.password
});
axiosInstance.defaults.headers['Authorization'] = "JWT " + response.data.access;
localStorage.setItem('access_token', response.data.access);
localStorage.setItem('refresh_token', response.data.refresh);
return data;
} catch (error) {
throw error;
}
}
render() {
return (
<div>
Login
<form onSubmit={this.handleSubmit}>
<label>
Username:
<input name="username" type="text" value={this.state.username} onChange={this.handleChange}/>
</label>
<label>
Password:
<input name="password" type="password" value={this.state.password} onChange={this.handleChange}/>
</label>
<input type="submit" value="Submit"/>
</form>
</div>
)
}
}
export default Login;
p.S：我真的希望有一个解决方案，完成本教程，感到高兴：(感谢大家的时间和帮助
我也遇到了同样的错误，对我来说，我在package.json文件中使用了一个代理到我的服务器端口，在服务器文件中我允许跨源资源共享(cors(希望这能帮助
您应该检查的一些详细信息
async function handleSubmit(event) {
event.preventDefault();
//Your baseURL: 'http://127.0.0.1:8000/api/', if you URL is /token/obtain/ then final url http://127.0.0.1:8000/api//token/obtain/
axiosInstance
.post("token/obtain/", {
username: this.state.username,
password: this.state.password,
})
.then((response) => {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
if (response.status === 200) {
localStorage.setItem("access_token", response.data.access);
localStorage.setItem("refresh_token", response.data.refresh);
}
})
.catch((err) => console.error(err));
}
好吧，伙计们，我想明白了。这篇文章的帮助：解决方案
我需要在Django中启用corsheaders。
首先，我用pip install django-cors-headers安装corsheads，并添加settings.py:
在中间件中：
MIDDLEWARE = [
'django.middleware.common.CommonMiddleware',
'corsheaders.middleware.CorsMiddleware',
]
在已安装的应用程序中：
INSTALLED_APPS = [
'corsheaders',
]
并包括此设置：
CORS_ORIGIN_ALLOW_ALL = True
并从axiosApi.js中删除：
{headers: {"Access-Control-Allow-Origin": "*"}
此外，https://stackoverflow.com/a/62824251/10182785这个答案对我很有帮助。
//第一步
npm i cors
//第二步-在你的节点js
const cors=require('cors'(；
app.use(cors(((；