Подключение react.js к бэкенду Django: Postman работает, а Axios post - нет

Я хотел бы получить решающее решение для связывания моего react с моим django backend, так как я впал в замешательство, собирая кусочки из разных источников. Я пытаюсь развернуть точно настроенную модель трансформатора для выводов, она отлично работает, и я могу отправить сообщение и получить ответ с помощью postman. Ниже приведен код Axios/node.js из postman для справки.

var axios = require('axios');
var data = JSON.stringify({
  "data": "my input sentence..."
});

var config = {
  method: 'post',
  url: 'http://127.0.0.1:8000/api/infer/',
  headers: { 
    'Content-Type': 'application/json', 
    'Cookie': 'csrftoken=zVbH181pBhnaAAtEoTmQGd0XLABvVLjsjVsDNYVudLZCmSMSXpe1RQJOd'
  },
  data : data
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

Это приложение не требует никаких модулей для входа или аутентификации... Ниже приведен код единственной страницы в react, которая, как я ожидаю -> по клику <-, отправит мои "данные" на бэкенд Django для предсказания, и вернет мой результат. Ниже приведен файл Home.js

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import { IconButton } from '@material-ui/core';
import { InputAdornment } from '@mui/material';
import {useState, useEffect} from "react"
import axios from "axios"
import {component} from 'react'


export default function MultilineTextFields() {
  
  const [data, setData] = React.useState('');

  const handleData = (event) => {
    setData(event.target.data);
  };

    useEffect(() => {
      getPrediction()
        } ,[])

    function getPrediction() {
      axios({
          method: "POST",
          url:'http://127.0.0.1:8000/api/infer/',
          
        }).then((response)=>{
        const data = response.data
          getPrediction(data)
        }).catch((error) => {
          if (error.response) {
            console.log(error.response);
            console.log(error.response.status);
            console.log(error.response.headers);
            }
        })}

    
       
        

    
// Function to make the predict API call and update the state variable - Prediction 
  

  return (
    <Box
      component="form"
      sx={{
        '& .MuiTextField-root': { m: 1, width:[250,300,500]}, alignItems: 'center',marginTop: 25,
        display: 'flex',
        flexDirection: 'column',maxWidth: '100%',
      }}
      noValidate
      autoComplete="off"
    >
      <div>
       
        <TextField
          id="outlined-multiline-static"
          label="Input Text"
          multiline
          rows={1}
          defaultValue=""
          InputProps={{  
          endAdornment: (
            <InputAdornment position="end">
              <IconButton edge= 'false' color="primary" size= 'small' onClick={handleData}>
                  Check
              </IconButton>
            </InputAdornment>
          ),
        }}
       /> 
      </div>
     
    </Box>
  );
}

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

 Internal Server Error: /api/infer/
.....
.....
.....
    raise ValueError(
ValueError: You should supply an encoding or a list of encodings to this method that includes input_ids, but you provided []
[16/Mar/2022 23:45:53] "POST /api/infer/ HTTP/1.1" 500 132951

Вернуться на верх