POST 400: неверный запрос — использование Django REST API и React

Я новичок в веб-разработке, поэтому заранее простите меня за невежество.

Я использую React, чтобы попытаться отправить данные на конечную точку сервера, управляемую Django, используя этот метод:

sendData(data) {
  const url = "http://127.0.0.1:8080/api/filtros/1/";
  const requestOptions = {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  };
  fetch(url, requestOptions);
}

В onClick компонента React NavDropdown:

<NavDropdown.Item
  key={item.id}
  onClick={() =>
    this.sendData({
      id: 0,
      dimension_id: dimension.id,
      item_id: item.id,
      usuario_id: 1
    })
  }
>
  {item.descripcion}
</NavDropdown.Item>

Вот как я регистрирую URL-адрес на маршрутизаторе с помощью Django:

router.register('api/filtros/1', FiltroUsuariosViewSet, 'filtro')

Мой Django ModelViewSet выглядит так:

class FiltroUsuariosViewSet(viewsets.ModelViewSet):

    queryset = FiltroUsuarios.objects.all()
    permission_classes = [
        permissions.AllowAny
    ]
    serializer_class = FiltroUsuariosSerializers

И мой сериализатор Django выглядит так:

class FiltroUsuariosSerializers (serializers.ModelSerializer):
    class Meta:
        model = FiltroUsuarios
        fields = ('id', 'dimension_id', 'item_id', 'usuario_id')

    def create(self, validated_data):
        post = FiltroUsuarios.objects.create(**validated_data)

Когда я нажимаю на компонент, я получаю это: POST http://127.0.0.1:8080/api/filtros/1/ 400 (Bad Request) и, по-видимому, ошибка связана с запросом на выборку.

Ребята, у вас есть идеи, в чем проблема?

Заранее большое спасибо!


person mateodennehy    schedule 23.03.2020    source источник
comment
Откройте инструменты разработчика и на вкладке сети проверьте, какую полезную нагрузку вы отправляете на серверную часть. 400 Bad Request означает, что данные, которые вы отправляете, неверны.   -  person Kox    schedule 23.03.2020
comment
Я согласен с @Kox, возможно, потому, что отправленные вами данные не соответствуют ожиданиям Django REST API.   -  person Muhammad Adam C    schedule 23.03.2020
comment
У меня была аналогичная проблема с JQuery, удалите headers: { Accept: "application/json", "Content-Type": "application/json" }, и попробуйте еще раз, у меня это сработало, не знаю почему   -  person Sentouki    schedule 24.02.2021


Ответы (1)


Лучший способ понять и избавиться от ошибок 400 Bad Request при подключении Django и React — запустить Django в режиме разработки, а затем открыть вкладку браузера Сеть при отправке запроса.

Перейдите на вкладку Сеть > Ответ и позвоните sendData(). Поскольку вы работаете на сервере разработки Django, вы получите конкретное исключение из-за ошибки 400 Bad Request. Чтобы смоделировать это, посмотрите на скриншот ниже и обратите внимание:

{пользователь: [Неверный тип. Ожидаемое значение pk, полученная строка]}

введите здесь описание изображения

Возвращаясь к вашей проблеме, у вас есть следующее в вашем .sendData():

x = {
      id: 0,
      dimension_id: dimension.id,
      item_id: item.id,
      usuario_id: 1
    }

Который вы затем вызываете JSON.stringify(). Если dimension.id и item_id оба являются целыми числами (разумное предположение), то вы передаете следующее в качестве полезной нагрузки:

JSON.stringify(x)
# returns:
"{"id":0,"dimension_id":1,"item_id":2,"usuario_id":3}"

Ваша модель Django для FiltroUsuarios определила эти столбцы/поля, поэтому теперь вам нужно проверить как ваши модели, так и FiltroUsuariosSerializers, что это ожидаемые типы значений/значений, сопоставленные с этими столбцами.

person onlyphantom    schedule 08.03.2021