#joseph01

1 messages · Page 1 of 1 (latest)

static falconBOT
pallid vale
#

404 means that endpoint doesn't exist on your server at localhost:3000

#

Is your server running locally?

#

And is it running at port 3000?

atomic urchin
#

Yes I am using netlify dev for that. So 3000 is proxy for 8888

pallid vale
#

Actually react runs on port 3000, so that doesn't look right

#

So your backend server is on port 8888?

#

Have you defined the proxy in package.json in your react app?

atomic urchin
#

No I haven't. In there doc's netlify functions docs they have defined proxy is not requried for this.

pallid vale
#

So the fetch above is trying to access the create checkout session route on the react service

#

You're getting 404 because it doesn't exist there

#

It exists on port 8888 instead. How are you making the fetch? Can you share the code snippet for fetching /create-checkout-session in your react code?

atomic urchin
#

Sure.

#

try {
const headers = {
"Content-Type": "application/json",
};

  const body = {
    products: product
  };
  const response = await fetch( 
    "/.netlify/functions/create-checkout-session", 
    { 
      method: "POST", 
      headers: headers, 
      body: JSON.stringify(body.products), 
    } 
  );
  
  console.log(response);
  const session = await response.json(); 
  const session_url = session.url;
  console.log(session_url);
} catch (error) {
  console.log(error);
}

getting error in catch

#

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

pallid vale
#

Ah

#

You're specifying the relative path in the fetch. So since you specify "/.netlify/functions/create-checkout-session", by default it will make that call at the same host and port that you're currently on

#

To avoid that either add the whole path to the fetch or specify a proxy in your package.json

atomic urchin
pallid vale
#

"proxy": "http://localhost:8888" would send requests to your server hosted on port 8888 if your code stays the same

atomic urchin
#

Added the proxy but not working 😑

#

My server is giving this

image.png
#

And my client having this

pallid vale
#

It still shows you're hitting port 3000

#

Can you just add the full path of your server to the fetch then and see if that works?

atomic urchin
#

Let's try that way

#

This came

image.png
#

Gave the proxy also didn't worked

pallid vale
#

You need to allow CORS on your server

atomic urchin
#

Hey, restarting the server with the proxy solved the issue but data is still not fetching. But data is fetched from the server

image.png
pallid vale
#

Have you checked your server logs?

atomic urchin
#

Yes server log is fetching data perfectly

image.png
pallid vale
#

have you tried adding more log statements to your client side code to see where it's breaking?

#

What does console.log(response); return?

atomic urchin
#

Any other way I can fetch data serverless without net dev. If you know as it's having issues

pallid vale
#

How are you returning data from your server? What does the response object look like? Can you share the server's code?

atomic urchin
#

Sure

#

exports.handler = async function (event, context) {
try {
const products = event.body;
console.log(products);
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card"],
line_items: [{
price_data: {
currency: "inr",
product_data: {
name: "p.name",
},
unit_amount: 124,
},
quantity: 1,
}
],
mode: "payment",
success_url: "http://localhost:3000/success",
cancel_url: "http://localhost:3000/cancel",
});
console.log(session.url);
return {
statusCode: 200,
body: JSON.stringify({ sessionId: session.id, sessionUrl: session.url }),
};
} catch (error) {
console.error(error);
return {
statusCode: 500,
body: JSON.stringify({ error: error.message }),
};
}
};

pallid vale
#

So in your client side code I think you need to change const session_url = session.url; to const session_url = session.body.url; right?

atomic urchin
#

No no in client I am taking the value from response directly right.

pallid vale
#

oh

#

It needs to be session.sessionUrl

#

You don't call it url: JSON.stringify({ sessionId: session.id, sessionUrl: session.url })

#

const session_url = session.sessionUrl;

#

But expand what you're logging in the browser console to take a look yourself

#

You just need to improve your logging so you can see what's happening

atomic urchin
#

Ohhh thaank god 🥹

#

It worked.

atomic urchin
#

Was stuck for sooo long. Really means a lot. Thank you so much!

pallid vale
#

No problem