为什么 "axios.post("/api/payment_intents", 方法不能定位我的付款意图？

Question

我的目标是在 React JS 网络应用程序中使用 Stripe 处理测试付款。当我输入测试卡信息时，我收到一个 404 错误并显示以下消息：“POST /api/payment_intents 404（未找到）”。为什么 "axios.post("/api/payment_intents", 方法不能定位我的付款意图？

[https://github.com/ChicagoJoe1991/saas-template][1]

import Stripe from "stripe";

const stripe = new Stripe(process.env.REACT_APP_SECRET_KEY);

export default async (req, res) => {
  if (req.method === "POST") {
    try {
      const { amount } = req.body;
        const paymentIntent = await stripe.paymentIntents.create({
        amount,
        currency: "usd",
      });

      res.status(200).send(paymentIntent.client_secret);
    } catch (err) {
      res.status(500).json({ statusCode: 500, message: err.message });
    }
  } else {
    res.setHeader("Allow", "POST");
    res.status(405).end("Method Not Allowed");
  }
};


try {
  const { data: clientSecret } = await axios.post("/api/payment_intents", {
    amount: price * 100,
  });

  const paymentMethodReq = await stripe.createPaymentMethod({
    type: "card",
    card: cardElement,
    billing_details: billingDetails,
  });

  if (paymentMethodReq.error) {
    setCheckoutError(paymentMethodReq.error.message);
    setProcessingTo(false);
    return;
  }

  const { error } = await stripe.confirmCardPayment(clientSecret, {
    payment_method: paymentMethodReq.paymentMethod.id,
  });

  if (error) {
    setCheckoutError(error.message);
    setProcessingTo(false);
    return;
  }

  onSuccessfulCheckout();
} catch (err) {
  setCheckoutError(err.message);
}

};

Answer 1

你没有设置baseURL。

{ axios.post("/api/payment_intents", }

您必须添加一些服务器路径，例如 localhost 或您托管 API 的任何位置。