从反应到表达的错误 404 POST 表单数据答案

【问题标题】：Error 404 POST form data from react to express从反应到表达的错误 404 POST 表单数据
【发布时间】：2020-12-15 05:31:32
【问题描述】：

我正在尝试将数据从表单 (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">

正在提交的路由（仍然需要将数据发送到条带）

 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' }],
    });

【问题讨论】：

您能否判断对/api/stripe/ 的请求是失败还是重定向？另外，您是否检查过环境变量REACT_APP_REDIRECT_URI 是否设置正确？
/api/stripe/ 在我自己运行它时失败，因为它需要提交表单中的数据，以便条纹可以处理它，但它仍在运行直到它到达那个点。当我提交表单时，它并没有在所有服务器端运行，这就是为什么我认为这与我用来发布的功能有关。我得到的 404 错误具有正确的端口 'localhost:3500/api/stripe/ 这是 express/nodejs 的路由
我被第一个sn-p弄糊涂了。乍一看，它似乎是前端代码，但随后您使用 node.env 中全局可用的 process.env。此外，您永远不会使用您的承诺返回的内容。我的假设是 window.location.href 设置为没有路由的 url，这可能是 404 的原因
前 3 个 sn-ps 都是前端表单组件的代码。我不知道 process.env 仅适用于节点。我也一直在将它与 react 一起使用，并在网站上的其他几个地方调用该重定向。你可能是对的，我现在正在用 curl 测试后端路由并得到一个不同的错误（401），所以在我解决这个问题后，我会在没有结果或 process.env 的情况下再次尝试

标签： javascript node.js reactjs express

【解决方案1】：

您发帖到的网址与express中配置的网址似乎不一致。您在 /api/stripe/ 上发帖，但 express 设置为侦听 /api/stripe，注意在 express 中缺少尾随 /。所以它没有找到您期望的端点。

我倾向于使用curl 命令来测试我的API，例如

curl -X POST "http://localhost:3500/api/stripe/" -H  "content-type: application/json" -d '{"key1": "value1", "key2": "value 2"}'

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

【讨论】：

是的，这看起来是正确的。验证您的 API 端点是否首先适用于手动 curl 或邮递员/失眠请求，然后将其构建到您的应用程序中。可能在您的请求 api.post('/api/stripe', ...) 中删除额外的 / 将解决您的问题。
没想到这样做，但我认为它帮助我解决了问题。这是我用来确保用户在发布之前登录的 requireLogin 功能。它引用了 req.user 但由于某种原因即使在登录时也找不到它。现在我删除了它并且它工作正常。