我通过axios请求POST方法，但post方法不起作用

Question

index.js//后端

const functions = require("firebase-functions");
const express = require("express");
const cors = require("cors");
const stripe = require("stripe") 
('sk_test_51IvTMySJHm59a7wpdl1wmkkj3uAIYN4XEBKuZO0ezF3vKR2dubLbzOEDLjCug
6wtULBK2mUsPWjJLol0NfMw67A000kWGNbvkb'); //Security code provide via stripe

//API


// - App config
const app = express();

// - Middlewares
app.use(cors({ origin: true }));
app.use(express.json());

// - API routes
app.get('/', (req, res) => {
res.status(200).send('hello world');
})

app.post("/payments/create", async (req, res) => {
const total = req.query.total;

console.log('Payment has been received !!! for this amount >>> ', total);

const paymentIntent = await stripe.paymentIntents.create({
    amount: total,  //This is in sub units
    currency: "usd",
});

res.status(201).send({
    clientSecret: paymentIntent.client_secret,
})

})
// - Listen Command
exports.api = functions.https.onRequest(app);

付款js//前端Raect组件

import { CardElement, useElements, useStripe } from '@stripe/react-stripe-js';
import axios from 'axios';
import React, { useEffect, useState } from 'react'
import CurrencyFormat from 'react-currency-format';
import { Link, useHistory } from 'react-router-dom';
import CheckoutProduct from './CheckoutProduct';
import './Payment.css';
import { getBasketTotal } from './reducer';
import { useStateValue } from './StateProvider';

function Payment() {
const [{ user, basket }, dispatch] = useStateValue();
const stripe = useStripe();
const elements = useElements();
const history = useHistory();

const [error, setError] = useState(null);
const [disabled, setDisabled] = useState(true)
const [succeeded, setSucceeded] = useState(false)
const [processing, setProcessing] = useState('')
const [clientSecret, setClientSecret] = useState(true)

useEffect(() => {
    //generate  the special stripe secret which allows us to charge a customer
    const getClientSecret = async () => {
        const responce = await axios({
            method: 'post',
            //  Stripe expects the subunit of whatever currency you are using 
            url: `/payments/create?total=${getBasketTotal(basket) * 100}`
        });
        setClientSecret(responce.data.clientSecret);
    }

    getClientSecret();
}, [basket])

console.log('The Secret is >>>', clientSecret);

const handleSubmit = async e => {
    e.preventDefault();
    setProcessing(true);

    const payload = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: elements.getElement(CardElement)
        }
    }).then(({ paymentIntent }) => {
        //paymentIntent = payment confirmation
        setSucceeded(true);
        setError(null);
        setProcessing(false);

        history.replace('/orders');
    })
}

const handleChange = e => {
    setDisabled(e.empty);
    setDisabled(e.error ? e.error.message : '')
}
return (
    <div className='payment'>
        <div className="paymentContainer">
            <h1>
                Checkout (<Link to='/checkout'>{basket.length} items</Link>)
            </h1>
            <div className="paymentSection">
                <div className="paymentTitle">
                    <h3>Delivery Address</h3>
                </div>
                <div className="paymentAddress">
                    <p>{user?.email}</p>
                    <p>Om nagar</p>
                    <p>Jayraj Building, Vasai</p>
                </div>
            </div>

            <div className="paymentSection">
                <div className="paymentTitle">
                    <h3>Review items and delivery</h3>
                </div>
                <div className="paymentItems">
                    {basket.map(item => (
                        <CheckoutProduct
                            id={item.id}
                            title={item.title}
                            price={item.price}
                            rating={item.rating}
                            img={item.img} />
                    ))}
                </div>

            </div>

            <div className="paymentSection">
                <div className="paymentTitle">
                    <h3>Payment Method</h3>
                </div>
                <div className="paymentDetails">
                    <form onSubmit={handleSubmit}>
                        <CardElement onChange={handleChange} />
                        <div className="paymentPriceContainer">
                            <CurrencyFormat
                                renderText={(value) => (
                                    <>
                                        <h3>Order Total : {value}</h3>
                                    </>
                                )}
                                decimalScale={2}
                                value={getBasketTotal(basket)}
                                displayType={"text"}
                                thousandSeparator={true}
                                prefix={"$"}
                            />

                            <button disabled={processing || disabled || succeeded}>
                                <span>{processing ? <p>Processing</p> : 'Buy Now'}</span>
                            </button>
                        </div>
                        {error && <div>{error}</div>}
                    </form>
                </div>
            </div>
        </div>
    </div>
)
}

export default Payment

axios.js

import axios from 'axios';

const instance = axios.create({
baseURL='http://localhost:5001/app-eea29/us-central1/api'  //baseurl from firebase emulator suite
})

export default instance;

xhr。js:177个职位http://localhost:3000/payments/create?total=4534404（未找到）

未捕获（promise）错误：请求失败，状态代码404在createError（createError.js:16）在结算（settle.js:17）在XMLHttpRequest.handle加载（xhr.js:62）

Answer 1

看起来您缺少axios中的“数据”属性。

我附上了代码。试试看它是否有效。

import instance from './path-to-axios'; <------- IMPORTANT

useEffect(() => {
    //generate  the special stripe secret which allows us to charge a customer
    const getClientSecret = async () => {
        const responce = await instance({
            method: 'post',
            //  Stripe expects the subunit of whatever currency you are using 
            url: `/payments/create`,
            data: getBasketTotal(basket) * 100 
        });
        setClientSecret(responce.data.clientSecret);
    }

    getClientSecret();
}, [basket])

编辑：（因为提供了第一个答案）

记住使用您创建的实例，而不是axios本身。

Answer 2

您将实例导出为具有基本URL的axios实例，但在react组件中，您没有使用它-您使用的是axios（{…}），其中没有基本URL。我觉得这就是你的问题所在