Missing "Access-Control-Allow-Origin" header in CORS pre-flight for "/authorize" endpoint

Get Help
7

Hi @TorbenGriebe and everyone!

Welcome to the Auth0 Community!

I am sorry about the late response to your inquiry!

I believe the following community post would be helpful regarding the matter:

Basically, it appears that you are making an XMLHttpRequest to a different domain than your page is on. Due to the nature of CORS, for every request made to a domain, an HTTP cookie is attached to it, thus blocking the request that you are trying to makes.Also, any calls made to the /authorize endpoint should be made via front-channel HTTP requests. They should only be made via a redirect or other top-level browser navigation and this is why CORS is not supported at that API.

Instead of using browser redirect, you are sending asynchronous request which is the reason why Auth0 is not working for you and is giving you CORS error. OAuth endpoints aren’t meant to receive scripted ajax requests via XHR or Fetch or whatever. Instead, the user’s meant to be navigated to the endpoint and then navigated back. You can’t navigate users with XHR.

If you wish to redirect from your front end instead of backend, an example using NextJS would be:

export default function Home() {
    return (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <a href='/login'>login</a>
        </div>
    );

You can read more about CORS here:

Hope this helps!

If you have any other questions, feel free to leave a reply or post again on the community!

Kind Regards,
Nik