Logout always causes CORS error

[prodz]

Ready to post? First, try searching for your answer.
I can successfully authenticate with Auth0 using my Next.js application but whenever I try to logout I always get a CORS error:

Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

It does not work from localhost but it does work from our development domain

[dawid.matuszczyk]

Hi @prodz

Welcome to the Auth0 Community!

Thank you for posting your question. If you are using the Link component from the Next.js it can cause the prefetch. Can you confirm if you are using The Link component and change it to the native <a> tag?

Next.js SDK Logout Does Not Work Due to CORS Error

Overview When using the Auth0 Next.js SDK in an app that uses the Next.js framework, the logout call does not actually log the user out. There are CORS errors in the Dev Tools Network tab. Applies To Auth0 Next.js SDK Cause This is usually caused by Next.js attempting to Pre-fetch the route (via an AJAX request) because the logout route is wrapped in a Link component. This is not correct, and the logout URL must be visited as a redirect. Solution For the logout links/buttons, instead of usin…

Thanks
Dawid

[prodz]

That fixed it!

{  item.name === 'Logout' ? (
    <a href={item.routePath}>
      <i className={`la ${item.icon}`}></i> {item.name}
    </a>
    ) : (
    <Link href={item.routePath}>
      <i className={`la ${item.icon}`}></i> {item.name}
    </Link>
)}