Kevin Powell - Community•3d ago•

2 replies

Faker

Redirection behaviour using <form> vs Fetch API

back-end🗣️discussion

front-end

Hello, quick question, when I submit a

<form>

<form>

to my backend route that returns a redirection request with

303 See Other with a Location header

303 See Other with a Location header

, the browser automatically navigates to the new URL. For example, this works perfectly:

<form action="/create-checkout-session" method="POST">
  <button type="submit">Checkout</button>
</form>

<form action="/create-checkout-session" method="POST">
  <button type="submit">Checkout</button>
</form>

However, when I try to do the same thing using the Fetch API:

const response = await fetch("/create-checkout-session", { method: "POST" });

const response = await fetch("/create-checkout-session", { method: "POST" });

even if the backend responds with a

303 redirect

303 redirect

, the browser does not navigate to the new page.
Can someone explain this behaviour pls.

To remedy this, I sent the redirection url client-side. Then I just changed the

window.location.href

window.location.href

for that user. I don't know if it's the right way to do it though. Any idea pls.

KP-C

Kevin Powell - Community•3d ago•

2 replies

Faker

Redirection behaviour using <form> vs Fetch API

back-end🗣️discussion

front-end

Hello, quick question, when I submit a

<form>

<form>

to my backend route that returns a redirection request with

303 See Other with a Location header

303 See Other with a Location header

, the browser automatically navigates to the new URL. For example, this works perfectly:

<form action="/create-checkout-session" method="POST">
  <button type="submit">Checkout</button>
</form>

<form action="/create-checkout-session" method="POST">
  <button type="submit">Checkout</button>
</form>

However, when I try to do the same thing using the Fetch API:

const response = await fetch("/create-checkout-session", { method: "POST" });

const response = await fetch("/create-checkout-session", { method: "POST" });

even if the backend responds with a

303 redirect

303 redirect

, the browser does not navigate to the new page.
Can someone explain this behaviour pls.

To remedy this, I sent the redirection url client-side. Then I just changed the

window.location.href

window.location.href

for that user. I don't know if it's the right way to do it though. Any idea pls.

Redirection behaviour using <form> vs Fetch API

Similar Threads

Redirection behaviour using <form> vs Fetch API

Similar Threads

Similar Threads

Similar Threads