React JS fetch function 不发送任何 HTTP 请求

Question

This very same React APP was working till yesterday and suddenly today it stopped working completely. The fetch is not working at all, it not sending the HTTP request at all as observed the Network tab of Firefox. What is wrong with this? It was the same code that perfectly worked yesterday and suddenly today it stops to work.

As you can see that there is absolutely no response from the server. Why there is no response code against the POST request, as seen in the first line?

React Code:

import React, { useState } from "react";
import { useHistory } from "react-router-dom";

export default function Login(props) {
  const [email_id, setEmailId] = useState({ email_id: "" });
  const [password, setPassword] = useState("");

  const history = useHistory();

  const submit = () => {
    let finalOrder = JSON.stringify(email_id);
    fetch("http://localhost:8080/Project/customer/login", {
      method: "POST",
      headers: { "Content-type": "application/json" },
      body: finalOrder,
    }).then((res) => {
      if (res.ok) {
        history.push("/AllProducts");
      }
    });
  };
  // sessionStorage.setItem("customer_id", JSON.stringify(result));

  // alert(sessionStorage.getItem("customer_id"));
  // history.push("/AllProducts");

  const handleEmailChange = (e) => {
    setEmailId({ email_id: e.target.value });
  };
  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };
  return (
    <form>
      <h3>Sign In</h3>

      <div className="form-group d-flex w-25 p-3 position-relative">
        <label>Email address : </label>
        <input
          type="email"
          className="form-control"
          placeholder="Enter email"
          value={email_id.email_id}
          onChange={handleEmailChange}
        />
      </div>

      <div className="form-group d-flex w-25 p-3">
        <label>Password : </label>
        <input
          type="password"
          className="form-control"
          placeholder="Enter password"
          value={password}
          onChange={handlePasswordChange}
        />
      </div>

      <div className="form-group d-flex w-25 p-3">
        <div className="custom-control custom-checkbox">
          <input
            type="checkbox"
            className="custom-control-input"
            id="customCheck1"
          />
          <label className="custom-control-label" htmlFor="customCheck1">
            Remember me
          </label>
        </div>
      </div>

      <button
        onClick={submit}
        className="btn btn-primary btn-block d-flex w-25 p-3"
      >
        Submit
      </button>
    </form>
  );
}

What is this weird behavior? Can anyone help? @CrossOrigin("http://localhost:3000/") added in the JAVA controller.Thanks in advance.

PS: Getting perfect response in ARC.

Now it is giving the following error:

Answer 1

"Error in the console: Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource." got resolved automatically by adding type="button" to the button. Sounds weird but true.