这是一个带有失败 POST 方法的 React JS Fetch

Question

我有一个简单的反应应用程序，我正在尝试请求和 post 方法并在我的 return div 中呈现响应。我的开发工具（网络）出现 400 错误。我已经调试了很多次应用程序。我只是不能中大奖。如果您运行 postman 中的端点使用附加的令牌，您将看到响应...

import React from "react";

function Checkout() {
  const handleSubmit = () => {
    const token = "TOKEN";
    const data = {
      transactionReference: "string",
      paymentMethod: "CreditCard",
      checkoutOrderUrl: "http://www.test.com/",
      user: {
        name: "string",
        msisdn: "+27610983142",
        email: "test@test.com",
      },
      payementMethodDetail: {
        RedirectUrl: "http://www.test.com",
        PurchaseEventWebhookUrl: "http://www.test.com",
      },
      bundle: [
        {
          productCode: "311",
          amount: 100,
          currencyCode: "ZAR",
          quantity: 1,
        },
      ],
    };
    const requestOptions = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: data,
    };
    fetch(
      "--------",
      requestOptions
    )
      .then((response) => response.json())
      .then((res) => console.log(res));
  };

  return (
    <div className="App">
      <button type="submit" onClick={handleSubmit}>
        Post Data
      </button>
    </div>
  );
}

export default Checkout;

Answer 1

您没有将对象序列化为 JSON。您实际上 发送[object Object]。为此使用 JSON.stringify：

const requestOptions = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${token}`,
  },
  body: JSON.stringify(data), // <-- here!
};

Answer 2

在 requestOptions 中，您需要 凭据：'include'，很可能是与 CORS 相关的问题。

这是一个带有失败 POST 方法的 React JS Fetch

This is a React JS Fetch with a failing POST method

javascript

reactjs