I'm trying to build a simple login using an API but keep facing errors

import React from "react";
import { useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";

export default function Login() {
  const navigate = useNavigate();
 
  const [formData, setFormData] = useState({
    uid: "",
    password: "",
    blocked: 0
  });
 

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
     const data = JSON.stringify(formData);
     console.log(data);

    axios
      .post("https://myphysio.digitaldarwin.in/api/login/", data)
      .then(function (response) {
        console.log(response);
        console.log("Successfully Logged in ");
    
       navigate("/success");
      
      })
      .catch(function (error) {
        console.log(error);
      });
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <h3>Login</h3>

      <div className="form-group">
        <label>uid Name</label>
        <input
         
          name="uid"
          className="form-control"
          placeholder="Enter your uid Name"
          value={formData.uid}
          onChange={(e) => setFormData({ ...formData, uid: e.target.value })}
        />
      </div>

      <div className="form-group">
        <label>Password</label>
        <input
          type="password"
          name="password"
          className="form-control"
          placeholder="Enter password"
          value={formData.password}
          onChange={(e) =>
            setFormData({ ...formData, password: e.target.value })
          }
        />
      </div>

      <button type="submit" className="btn btn-primary btn-block">
        Submit
      </button>
    </form>
  );
}

The error I keep facing is console log of error

POST https://myphysio.digitaldarwin.in/api/login/ 500 (Internal Server Error)

Error: Network Error at createError (createError.js:16:1) at XMLHttpRequest.handleError (xhr.js:117:1)

POST https://myphysio.digitaldarwin.in/api/login/ net::ERR_CONTENT_LENGTH_MISMATCH 500 (Internal Server Error)

CodePudding user response：

All your errors come from the backend so I suggest you to post a question in the django section (I looked at the link and I was django framework so I assume that you use django). Maybe you don't want to stringify your formData (usually it's common to send a json in a post request).

CodePudding user response：

can you try to put the function handlesubmit onclick of subm,it button and check if it's working ?? thank you