Javascript 错误404将表单数据从react发布到express

我试图将数据从表单（react）发布到我的后端（nodejs/express），但我收到了404错误。这里有很多代码，所以我试着发布一些重要的东西

提交功能

  //submit data
  const submitCard = (ev) => {
    console.log(ev);
    ev.preventDefault();

    try {
      api.post('/api/stripe/', payment).then((result) => {
        window.location.href = process.env.REACT_APP_REDIRECT_URI;
      });
    } catch (e) {
      console.log(e);
    }
  };

正在提交的数据

  const paymentUpdated = () => {
    setPayment({
      name: name,
      firstName: firstName,
      lastName: lastName,
      cardNumber: number,
      expDate: expiry,
      cvc: cvc,
      zip: zip,
      plan: plan,
    });
  };

表单标签+按钮

<form className="creditForm" onSubmit={submitCard}>
<Button className="save-button" type="submit">

---

您发布到的URL与在express中配置的URL似乎不一致。您发布到

/api/stripe/

，但express设置为侦听

/api/stripe

，请注意express中缺少尾随。因此，它没有找到您期望的端点

我倾向于使用

curl

命令测试我的APIs，例如

curl-X POST”http://localhost:3500/api/stripe/“-H”内容类型：application/json“-d'{“key1”：“value1”，“key2”：“value 2”}”

---

一旦我证明了API的工作原理，我才担心从应用程序调用它。这将使您更容易在代码中确定问题所在。

您发布到的URL与在express中配置的URL似乎不一致。您发布到

/api/stripe/

，但express设置为侦听

/api/stripe

，请注意express中缺少尾随。因此，它没有找到您期望的端点

我倾向于使用

curl

命令测试我的APIs，例如

curl-X POST”http://localhost:3500/api/stripe/“-H”内容类型：application/json“-d'{“key1”：“value1”，“key2”：“value 2”}”

---

一旦我证明了API的工作原理，我才担心从应用程序调用它。这将使您更容易识别代码中的问题所在。

您能告诉我对

/api/stripe/

的请求是失败的还是重定向？另外，您是否检查了env变量

REACT\u APP\u REDIRECT\u URI

是否设置正确？当我单独运行/api/stripe/时，它失败了，因为它需要提交表单中的数据，以便stripe可以处理它，但它仍在运行，直到到达该点为止。当我提交表单时，它并没有在所有服务器端运行，这就是为什么我认为它与我用来发布的功能有关。我得到的404错误具有正确的端口“localhost:3500/api/stripe/，这是到express/nodejsI的路由，我被第一个代码段弄糊涂了。乍一看，它似乎是前端代码，但随后您使用的是process.env，它在node中全局可用。而且你从不使用你的承诺所回报的东西。我的假设是window.location.href设置为一个没有路由的url，这可能是404的原因。前3个代码段都是来自前端表单组件的代码。我不知道process.env仅用于节点。我也在react中使用它，并在站点的其他几个地方调用该重定向。不过，您可能是对的，我现在正在使用curl测试后端路由，并得到一个不同的错误（401），因此在解决该问题后，我将在没有结果或进程的情况下重试。您能告诉我对

/api/stripe/

的请求是失败的还是重定向？另外，您是否检查了env变量

REACT\u APP\u REDIRECT\u URI

是否设置正确？当我单独运行/api/stripe/时，它失败了，因为它需要提交表单中的数据，以便stripe可以处理它，但它仍在运行，直到到达该点为止。当我提交表单时，它并没有在所有服务器端运行，这就是为什么我认为它与我用来发布的功能有关。我得到的404错误具有正确的端口“localhost:3500/api/stripe/，这是到express/nodejsI的路由，我被第一个代码段弄糊涂了。乍一看，它似乎是前端代码，但随后您使用的是process.env，它在node中全局可用。而且你从不使用你的承诺所回报的东西。我的假设是window.location.href设置为一个没有路由的url，这可能是404的原因。前3个代码段都是来自前端表单组件的代码。我不知道process.env仅用于节点。我也在react中使用它，并在站点的其他几个地方调用该重定向。不过，您可能是对的，我现在正在使用curl测试后端路由，并得到一个不同的错误（401），因此在解决该问题后，我将在没有结果或进程的情况下重试。是的，这看起来是正确的。验证您的API端点是否首先可用于手动curl或邮递员/失眠症请求，然后将其构建到您的应用程序中。可能删除请求中的额外

/

api.post（'/api/stripe'，…）

会解决您的问题。我没想到会这样做，但我认为它帮助我解决了问题。我使用requireLogin函数来确保用户在发布之前已登录。它正在引用req.user，但由于某些原因，即使在登录时也找不到它。现在我把它取下来了，它工作得很好。是的，这看起来是正确的。验证您的API端点是否首先可用于手动curl或邮递员/失眠症请求，然后将其构建到您的应用程序中。可能删除请求中的额外

/

api.post（'/api/stripe'，…）

会解决您的问题。我没想到会这样做，但我认为它帮助我解决了问题。我使用requireLogin函数来确保用户在发布之前已登录。它正在引用req.user，但由于某些原因，即使在登录时也找不到它。现在我把它取下来了，效果很好。

 app.post('/api/stripe', requireLogin, async (req, res) => {
    const plan = await stripe.plans.retrieve('price_1HfAZGGFN31Q4RRjSrFXnGgD');
    console.log(req);
    if (req.user.stripeId) {
      const customer = await stripe.customers.retrieve(req.user.stripeId);
    } else {
      const customer = await stripe.customers.create({
        email: req.user.email,
        description: 'Subscribing to Personal Plan Monthly Subscription',
      });
      req.user.stripeId = customer.id;
      const user = await req.user.save();
    }
    req.user.plan = 2;
    const user = await req.user.save();
    const subscription = await stripe.subscriptions.create({
      customer: req.user.stripeId,
      items: [{ price: 'price_1HfAZGGFN31Q4RRjSrFXnGgD' }],
    });