为啥 axios 不将数据发布到服务器进行条带化？

Posted 2023-03-22

【中文标题】为啥 axios 不将数据发布到服务器进行条带化？

【英文标题】：Why axios is not posting data to server for stripe?为什么 axios 不将数据发布到服务器进行条带化？

【发布时间】：2021-12-20 07:27:16

【问题描述】：

我正在关注一个 youtube 教程进行付款，但我陷入了 axios 无法将数据发布到服务器的速度

代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Abc from './Abc';
import './index.css'

ReactDOM.render(
  <Abc/>
  ,
  document.getElementById('root')
  
);

Abc.js

import React from "react";
import  loadStripe  from "@stripe/stripe-js";
import 
  Elements,
  CardElement,
  useStripe,
  useElements
 from "@stripe/react-stripe-js";
import axios from "axios";

const CheckoutForm = ( success ) => 
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async event => 
    event.preventDefault();

    const  error, paymentMethod  = await stripe.createPaymentMethod(
      type: "card",
      card: elements.getElement(CardElement)
    );

    if (!error) 
      const  id  = paymentMethod;

      try 
        const  data  = await axios.post("/api/charge",  id, amount: 1099 );
        console.log(data);
        success();
       catch (error) 
        console.log('error is => ',error);
      
    
  ;

  return (
    <form
      onSubmit=handleSubmit
      style= maxWidth: "400px", margin: "0 auto" 
    >
      <h2>Price: $10.99 USD</h2>
      <img
        src="https://images.ricardocuisine.com/services/recipes/500x675_7700.jpg"
        style= maxWidth: "50px" 
        alt='abc'
      />
      <CardElement />
      <button type="submit" disabled=!stripe>
        Pay
      </button>
    </form>
  );
;

// you should use env variables here to not commit this
// but it is a public key anyway, so not as sensitive
const stripePromise = loadStripe("pk_test_51JsQsfBbWBJ638dRkTi29yzu85fW6JAvGzbJo9f5RgOtOogcpKnzCfJo6VJoKGemEW54wxrDebWpM8V6vKJl36mC00K3JPAmHr");

const Abc = () => 
  const [status, setStatus] = React.useState("ready");

  if (status === "success") 
    return <div>Congrats on your empanadas!</div>;
  

  return (
    <Elements stripe=stripePromise>
      <CheckoutForm
        success=() => 
          setStatus("success");
        
      />
    </Elements>
  );
;

export default Abc;

charge.js

import Stripe from "stripe";
const stripe = new Stripe("sk_test_51JsQsfBbWBJ638dRR3Iryb907XNtHaeVYhtCRp6SDmaiWmQg51ys2wdB3z6HJ8svutnA8HPMp5yEtdxTSParn3uN00Xb3PJd4o");

export default async (req, res) => 
  const  id, amount  = req.body;

  try 
    const payment = await stripe.paymentIntents.create(
      amount,
      currency: "USD",
      description: "Delicious empanadas",
      payment_method: id,
      confirm: true
    );

    console.log(payment);

    return res.status(200).json(
      confirm: "abc123"
    );
   catch (error) 
    console.log(error);
    return res.status(400).json(
      message: error.message
    );
  
;

但这在提交 xhr.js:210 POST http://localhost:3000/api/charge 404 (Not Found) 时给了我错误

层次结构

任何帮助将不胜感激。我正在关注https://www.youtube.com/watch?v=WTUYem2IxLA&ab_channel=LeighHalliday 教程

【参考方案1】：

假设您已正确设置 Next.js，您的 api 文件夹需要位于 /pages 目录中。

https://nextjs.org/docs/api-routes/introduction

【讨论】：

如何设置 Next.js

nextjs.org/docs/getting-started 这应该会有所帮助。跑起来很容易。

我的其他项目页面还能保留在src文件夹中吗？

我没有在这里展示，但它们在我的其他项目中

Next.js 处理路由的方式如下：nextjs.org/docs/routing/introduction。 src 文件夹仍然可以包含组件和其他反应特定元素，如钩子。