我无法发送发布请求并从 API 获取响应

Question

我正在研究 ReactJS 技术，以在 Web 开发中学习和成长。我已经开始从事 crud 应用程序之类的项目。最近我创建了一个目录菜单，它可以显示来自 API 的显示数据。

因此，由于该 API 是一个虚拟 API，因此我能够成功地从中获取信息。

现在我接到了一项任务，我必须向 API 发送一个发布请求并从中取回响应。

所以我需要在使用加密密钥加密数据后发送数据以访问 API 并取回响应。

这是我完成的代码，我什至无法在控制台中获取错误标志消息。

我认为在向 API 发送请求时我可能遗漏了一些东西或做错了，或者我没有正确地在控制台记录我得到的响应。

查看我为向 API 发送发布请求而编写的代码，以便在发送正确加密的参数后从中获取响应，否则我必须控制我正在做的错误。

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

import CryptoJS from "crypto-js";

import axios from "axios";

import "./login.css";


function Login() {

  const [mobile, setMobile] = useState("");
  const [pin, setPin] = useState("");
  const [accessToken, setAccessToken] = useState("");
  

  const navigate = useNavigate();


  const data = { user_mobile: mobile, user_pin : pin} 

  const ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), 'tpcgkCABsh051409').toString();


  const handleSubmit = async (e) =>{
    e.preventDefault();
    console.log("form submitted")
    const data = { user_mobile: mobile, user_pin: pin };

    fetch("http://business.thesmartr.com/v1/authorization/login.php", {
      method: "POST",
      headers: {
        "access-control-allow-origin" : "*",
        "Content-Type": "application/json"
      },
      mode:"no-cors",
      body: ciphertext
    })
    .then(response => response.json)
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error("Error:", error);
      alert(error.message);
    });
  }
  

  return (
    <div className="main-div">
      <div className="center">
        <div className="logo">
          <img src="/images/bizwy logo.svg"/>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="txt-field">
            <input
                type="number"
                value={mobile}
                onChange={(event) => setMobile(event.target.value)}
                required
              />
              <span></span>
            <label>Mobile Number</label>
          </div>
          <div className="txt-field">
            <input
                type="password"
                value={pin}
                onChange={(event) => setPin(event.target.value)}
                required
              />
              <span></span>
            <label>Password</label>
          </div>
          <div className="pass">Forgot Password</div>
          {/* <button type="submit">Login</button> */}
          <div className="submit">
            <input type="submit" value="Login"/>
          </div>
        </form>
      </div>
    </div>
  );
}

export default Login;

我认为我的错误正是在我发送正文中的加密值时。 检查我在发送发布请求时是否有任何错误或我正在犯的任何其他错误。

我提供了完整代码详细信息的沙箱链接，如果您需要有关代码详细信息或我必须完成的任务的任何信息，请随时问我。

https://codesandbox.io/s/qr-menu-smvr6h?file=/src/Login.js

Answer 1

你没有打电话给json method of the response。

// your code
.then(response => response.json)

//what you actually need to do
.then(response => response.json())