React JS fetch函数不发送任何HTTP请求答案

【问题标题】：React JS fetch function not sending any HTTP requestReact JS fetch函数不发送任何HTTP请求
【发布时间】：2021-04-19 01:29:52
【问题描述】：

这个相同的 React 应用程序一直工作到昨天，今天突然完全停止工作。提取根本不起作用，它根本没有发送 HTTP 请求，正如 Firefox 的“网络”选项卡所观察到的那样。这有什么问题？这是昨天完美运行的相同代码，今天突然停止运行。

如您所见，服务器绝对没有响应。为什么 POST 请求没有响应代码，如第一行所示？

反应代码：

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>
  );
}

这是什么奇怪的行为？任何人都可以帮忙吗？ @CrossOrigin("http://localhost:3000/") 添加在 JAVA 控制器中。提前致谢。

PS：在 ARC 中获得完美响应。

现在它给出了以下错误：

【问题讨论】：

控制台有没有报错？代码似乎很好
- 您能否为您的 fetch 调用添加一个 .catch 块，看看您是否遇到任何错误。 - 或许可以尝试使用Postman 之类的方式手动进行 POST 调用，以确定问题出在客户端还是服务器端，并在此基础上为我们提供更多信息。
在 ARC 中获得完美响应。
控制台错误：未捕获（承诺中）类型错误：尝试获取资源时出现网络错误。
这是一个交叉错误..端口不同..

标签： javascript reactjs spring-data-jpa

【解决方案1】：

“控制台中的错误：未捕获（承诺）类型错误：尝试获取资源时出现网络错误。”通过向按钮添加 type="button" 自动解决。听起来很奇怪，但确实如此。

【讨论】：