Redirect from route handler blocked by CORS policy

[FabioDainese]

Summary

So, basically, I've setup a NextJS v14.1.0 to just experiment with various Stripe checkout methods, like using server actions, route handlers, etc. and everything works fine except for the route handler variant, since I get the error access to fetch at ... from origin ... has been blocked by CORS policy.
Now, it makes sense that it raises this issue due to the fact that I'm trying to redirect the user to another separate website - hosted by Stripe - but at the same time then, why the same redirect works on server actions? I mean, they are both on the server side and they both redirect to a different website 🧐 What am I missing here?

Route handler:

import { redirect } from "next/navigation";

export const POST = async (req: NextRequest) => {
    // Stuff

    return NextResponse.redirect(new URL(checkoutSession.url!), {
        status: 303,
    });

    // Also this `redirect` doesn't work
    // redirect(checkoutSession.url as string);
};

Server action:

"use server"

import { redirect } from "next/navigation";

export const createCheckoutSession: CreateCheckoutSessionsProps = async (data) => {
    // Stuff

    redirect(checkoutSession.url as string);
};

I mean, to fix this, I could simply return the url generated by Stripe - instead of directly performing a redirect - and then redirect the user from the client component with window.location.replace(...), but at the same time I would really like to know why it works on one and not on the other.

Finally, I've also added a sandbox link, so you can easily try this error on a live project (if you fork/download it, keep in mind to also create the .env.local file following .env.example boilerplate file).

Additional information

No response

Example

https://codesandbox.io/p/devbox/infallible-microservice-pkmz9g?file=%2Fapp%2Fapi%2Fstripe%2Fcreate-checkout-session%2Froute.ts%3A42%2C1

[slava-lu]

The same problem

[issam-seghir]

i have the same issue, any workaround that ?

[Angryman18]

facing the very same issue.. any solution yet?

[Michota]

same

[dan-kwiat]

How are you calling your API route from the frontend?

Instead of this:

<button
  onClick={() => {
    fetch("/api/your-endpoint", { method: "POST" })
  }}
>
  Submit
</button>

Do this:

<form action="/api/your-endpoint" method="post">
  <button type="submit">Submit</button>
</form>