ax ios запрос к DRF с аутентификацией JWT завершается неудачно

Question

У меня есть Django rest API с аутентификацией JWT для регистрации и входа, созданный с помощью реакции. При попытке войти в систему я получаю сообщение об ошибке 403.

Я добавил токен csrf в заголовки запроса и вижу его в обещании при использовании консоли, так что здесь проблема не в этом. .

Я просто не понимаю, где этот пост нарушается

import axios from "axios";
import Cookies from "js-cookie";

var csrftoken = Cookies.get("csrftoken");

const axiosInstance = axios.create({
  baseURL: "http://127.0.0.1:8000/api/",
  timeout: 5000,
  headers: {
    HTTP_X_CSRF_TOKEN: csrftoken,
    Authorization: localStorage.getItem("access_token")
      ? "JWT " + localStorage.getItem("access_token")
      : null,
    "Content-Type": "application/json",
    accept: "application/json",
    withCredentials: true,
  },
});

axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    const originalRequest = error.config;
    // test for token presence, no point in sending a request if token isn't present
    if (
      localStorage.getItem("refresh_token") &&
      error.response.status === 401 &&
      error.response.statusText === "Unauthorized"
    ) {
      const refresh_token = localStorage.getItem("refresh_token");

      return axiosInstance
        .post("/token/refresh/", { refresh: refresh_token })
        .then((response) => {
          localStorage.setItem("access_token", response.data.access);
          localStorage.setItem("refresh_token", response.data.refresh);

          axiosInstance.defaults.headers["Authorization"] =
            "JWT " + response.data.access;
          originalRequest.headers["Authorization"] =
            "JWT " + response.data.access;

          return axiosInstance(originalRequest);
        })
        .catch((err) => {
          console.log(err);
        });
    }
    // specific error handling done elsewhere
    return Promise.reject({ ...error });
  }
);

export default axiosInstance;

И компонент входа в систему с использованием экземпляра ax ios:

import React, { Component } from "react";
import axiosInstance from "../axiosApi";
import DjangoCSRFToken from "django-react-csrftoken";

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

  async handleSubmit(event) {
    event.preventDefault();
    try {
      const response = await 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 response;
    } catch (error) {
      throw error;
    }
  }

  render() {
    return (
      <div>
        Login
        <form onSubmit={this.handleSubmit}>
          <DjangoCSRFToken />
          <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;

консоли при нажатии отправьте:

Answer 1

Пожалуйста, попробуйте удалить CSRF из звонка. и используйте @csrf_exepmt для получения дополнительной информации, пожалуйста, перейдите по этой ссылке. Django csrf_exempt , используя ваш JWT, этого достаточно.

Пример:

@csrf_exempt
def myEndpoint():
  // my code