POST 400：錯誤請求 - 使用 Django REST API 和 React

Question

我對網絡開發還很陌生，所以請提前原諒我的無知。

我正在使用 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);
}

在 NavDropdown React 組件的 onClick 上：

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

這是我使用 Django 在路由器上注冊 url 的方式：

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 Serializer 看起來像這樣：

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)顯然錯誤出在獲取請求上。

你們有什么想法嗎？

非常感謝！

Answer 1

在連接 Django 和 React 時，理解和消除 400 Bad Request 錯誤的最好方法是在開發模式下運行 Django，然后在發送請求時啟動瀏覽器的網絡選項卡。

切換到Network -> Response選項卡並調用sendData() 。 由於您在 Django 的開發服務器上運行，您將收到 400 Bad Request 錯誤的特定異常。 要模擬這一點，請參閱下面的屏幕截圖並注意：

{"user": ["類型不正確。預期的 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}"

您的FiltroUsuarios Django 模型定義了這些列/字段，因此您現在需要檢查您的模型和FiltroUsuariosSerializers ，這些是映射到這些列的預期值/值類型。