Django + React: Невозможно получить доступ к конечной точке

У меня есть конечная точка, которую я сделал с помощью djangorestframework. Представление имеет метод dispatch для получения данных из запроса и отправки их в метод post. Конечная точка:

class Profile(APIView):
    permission_classes = [IsAuthenticated]
    data = None

    def dispatch(self, request, *args, **kwargs):
        if request.content_type == 'application/json':
            try:
               self.data = json.loads(request.body) 
            except json.JSONDecodeError:
                return super().dispatch(request, *args, **kwargs) 
        else:
            return super().dispatch(request, *args, **kwargs)

Я протестировал эту конечную точку с заголовком 'Authorization': 'Bearer ${token}' с помощью postman и rest-файла, и я получаю данные обратно со статусом 200. Но когда я делаю то же самое в React, используя метод axios.post, тот же самый пользователь оказывается неавторизованным. Axios.post:

useEffect(() => {
    axios.post('http://127.0.0.1:8000/user/profile/', {
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${token}`
      },
      body: {
        "username": "Caution1",
        "password": "Caution123"
      }
    }).then(response => {setData(response.data); console.log(data);});
    }, []);

У меня CORS_ALLOW_ALL_ORIGINS и CORS_ALLOW_CREDENTIALS оба равны True.

Думаю, проблема в том, как структурирован ваш запрос в Axios. Заголовки и данные должны передаваться отдельно, а Axios не использует body в качестве параметра. Поэтому вместо этого в качестве второго аргумента будет отправлена полезная нагрузка, а в качестве третьего - заголовок.

Вот как это должно выглядеть: 

useEffect(() => {
    axios.post('http://127.0.0.1:8000/user/profile/', 
      {
        "username": "Caution1",
        "password": "Caution123"
      }, 
      {
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${token}`
        }
      }
    ).then(response => {
        setData(response.data); 
        console.log(response.data);
    }).catch(error => {
        console.error("Error:", error.response);
    });
}, []);

Если ошибка не исчезла, попробуйте определить это явно:

CORS_ALLOW_HEADERS = ['content-type', 'authorization']

Потому что некоторые браузеры блокируют авторизованные запросы (заголовки Authorization), если вы не зададите их явно.

перепишите свой запрос в axios

useEffect(() => {
    axios.post('http://127.0.0.1:8000/user/profile/',  {
        "username": "Caution1",
        "password": "Caution123"
      },{
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${token}`
      },
    }).then(response => {setData(response.data); console.log(data);});
    }, []);
Вернуться на верх