why my front end(react) and back-end(express) is not connecting

Question

my front and back-end is not connecting. its show xhr.js:184 POST http://localhost:3000/payments/create?total=12999 404 (Not Found) error. for more info i provide necesary code below.

this is my index.js file of backend(express).

const functions = require('firebase-functions');
const express = require('express')
const cors = require('cors')
const stripe="   "

const app=express()
app.use(cors({origin:true}))
app.use(express.json())

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

app.post('/payments/create',async(req,res)=>{
//   console.log("api is working")
  
    const total=req.query.total
     console.log('payment req recievd is',total)
   
    const paymentIntent = await stripe.paymentIntent.create({
        amount:total,
        currency:"usd"
    })
    res.status(201).send({
        
        clientSecrat:paymentIntent.client_secret
    })
})
exports.api=functions.https.onRequest(app)

this is my axios.js file...

import axios from 'axios'
const instance=axios.create({
    baseURL:'http://localhost:5001/challange-c1266/us-central1/api' 
}
)
export default instance

this is my payment.js file,where i want to use data from back-end,when person click on payment button than person clientSecret change true to real ID.

const [clientSecret, setClientSecret] = useState(true)
    useEffect(() => {
            console.log("use effect is working")
            const getClientSecret = async () => {
                console.log("get client sec is is working")
                const response = await axios({
                    method: 'post',
                    url: `/payments/create?total=${getBasketTotal(basket) * 100}`
                })
                // console.log('response is >>>>>>>>>>>',response)
                // console.log(response.data)
                setClientSecret(response.data.clientSecret)
            }
            getClientSecret()
        }, [basket])
        console.log('the secrate is >>>>>>>>', clientSecret)

but when i click on payment button i am getting error in console which i shown below. localhost:3000 is my react server...

 xhr.js:184 POST http://localhost:3000/payments/create?total=12999 404 (Not Found)createError.js:16 Uncaught (in promise) Error: Request failed with status code 404
        at createError (createError.js:16)
        at settle (settle.js:17)
        at XMLHttpRequest.handleLoad (xhr.js:69)

Answer 1

Your React code is running at

http://localhost:3000

And when you make API call via axios it will take the same port for api call You have to pass the port 5001 in the API call.

const response = await axios({
    method: 'post',
    url: `localhost:5001/payments/create?total=${getBasketTotal(basket) * 100}`
})

Going forward you can use generic baseURL to make the API calls

BaseUrl = window.location.protocol + '//' + window.location.hostname + ":5001/";

and use

const response = await axios({
    method: 'post',
    url: `${BaseUrl}payments/create?total=${getBasketTotal(basket) * 100}`
})