Question

新手在这里：）

我正在尝试通过有关Django后端和React的教程来学习JWT身份验证。 https://hackernoon.com/110percent-complete-jwt-authentication-with-django-and-react-2020-iejq34ta。

在进行在线搜索之前，我已经解决了本教程中的许多意外错误，但是现在我找不到解决方案。

从教程开始，我正在第一步中使用Axios处理请求和令牌：

“ 我们要使用Axios用于：POST到/ api / user / create /创建用户POST到/ api / token / obtain /登录用户并获取JWT令牌对POST到/ api / token / refresh /从受保护的/ api / hello /中刷新JWT令牌对GETTING，以查看后端暗中必须说的话“

基于教程的预期行为已打开（图1）：

The expected behavior : Image 1

但是在执行npm run build命令python manage.py runserver命令之后，我试图登录系统，并且在firefox控制台上出现此错误（图2）

Error on firefox console : Image 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：我真的希望有一个解决方案，完成本教程，开心一点:) 谢谢大家的时间和帮助！

Answer 1

好吧，我遇到了同样的错误，对我来说，我在package.json文件中使用了一个代理到我的服务器端口，并且在服务器文件中我允许了跨源资源共享（CORS）希望对您有帮助

Answer 2

您应该检查一些细节

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));
}

Answer 3

好的，我知道了。这篇文章的帮助：THE SOLUTION

我需要在Django中启用corsheaders。

首先，我用pip install django-cors-headers安装corsheaders，然后添加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这个答案对我也有帮助。

ReactJS + Axios“未捕获（承诺）错误：网络错误” | “未捕获的TypeError：response.data未定义”

3 个答案: