ReactJS + Ax ios «Неперехваченная (в обещании) ошибка: ошибка сети» | «Неперехваченная ошибка типа: response.data не определена»

Question

newb ie здесь:)

Я пытаюсь узнать об аутентификации JWT, следуя руководству с Django серверной частью и React. https://hackernoon.com/110percent-complete-jwt-authentication-with-django-and-react-2020-iejq34ta.

Раньше я устранял множество непредвиденных ошибок в этом руководстве с помощью онлайн-поиска, но теперь не могу найти решение.

Я на первых шагах Чтобы использовать Ax ios для запросов и токенов, из учебника:

" Мы хотим использовать Ax ios для: POSTing to / api / user / create / для создания userPOSTing to / api / token / receive / для входа пользователя и получения пары токенов JWT Публикация в / api / token / refresh / для обновления sh пары токенов JWT ПОЛУЧЕНИЕ из защищенного / api / hello /, чтобы узнать, что бэкэнд тайно должен сказать"

Ожидаемое поведение, основанное на учебнике (Изображение 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.

Файлы, которые я использовал для этого раздела tu torial:

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

PS: Я действительно надеюсь на решение, чтобы завершить sh этот урок, чтобы быть счастливыми :) Спасибо всем за ваше время и за помощь !!

Answer 1

Вы должны проверить некоторые детали

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 2

Хорошо, ребята, я разобрался. Справка из этого сообщения: РЕШЕНИЕ

Мне нужно включить заголовки в Django.

Прежде всего, я устанавливаю заголовки с помощью pip install django-cors-headers и добавляю 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": "*"}

Кроме того, { ссылка } этот ответ был мне полезен.

Answer 3

Ну, у меня такая же ошибка, для меня я использовал прокси в своем пакете. json файл на порт моего сервера, а в файле сервера я разрешил совместное использование ресурсов перекрестного происхождения (cors) Надеюсь, это поможет