ReactJS + Axios "Uncaught (in promise) Error: Network Error" | "Uncaught TypeError: response.data is undefined"

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;

注意：我在网上发现我应该在 djsr/frontend/src/axiosApi.js 中将 'Access-Control-Allow-Origin': '*' 放在 headers 上，但没有任何反应这个.

和 :

// 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

好的，伙计们，我明白了。来自这个 post 的帮助：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": "*"}

另外，这个回答对我很有帮助。

ReactJS + Axios "Uncaught (in promise) Error: Network Error" | "Uncaught TypeError: response.data is undefined"

ReactJS + Axios "Uncaught (in promise) Error: Network Error" | "Uncaught TypeError: response.data is undefined"

javascript

jwt

reactjs

axios

jwt-auth