"Cross-origin redirection denied by CORS policy" Auth0 Error Occurs in Blazor Web Applications

The browser generates a cross-origin redirection denied by CORS policy error when a Blazor Web Application uses a <NavLink> anchor to navigate to Auth0. This occurs because the Blazor Router intercepts Nav Link anchors and fails to properly handle redirection to Auth0. Replace the <NavLink> anchors with regular HTML anchors <a> in the application code to resolve the issue.

Cross-origin redirection denied by CORS policy: Cancelled load because it violates the resource’s CORS response header 

• Auth0
• Blazor Web Application
• Cross-Origin Resource Sharing (CORS)
• Cross-Origin Isolation

The error occurs because the Blazor Web Application uses <NavLink> anchors instead of regular HTML anchors <a> during redirection to Auth0. The Blazor Router intercepts these server-side links or external navigations but fails to handle redirection to Auth0 correctly within the browser's CORS policies.

To resolve the CORS redirection error, locate the login and logout trigger links in the application code and replace the Blazor <NavLink> anchors with regular HTML anchors <a>.

1. Open the program.cs file or the relevant Razor component containing the navigation links.
2. Locate the <AuthorizeView> components used for the login and logout triggers.
3. Replace the Blazor Nav Link components with regular HTML <a> anchors, optionally using the target="_top" attribute when using an iframe.
4. Update the code to match the following HTML anchor structure.

   <AuthorizeView>
       <Authorized>
           <div class="nav-item px-3">
               <a class="nav-link" href="account/logout" target="_top">
                   <span class="bi bi-terminal-fill" aria-hidden="true"></span> Logout
               </a>
           </div>
       </Authorized>
   </AuthorizeView>
   
   <AuthorizeView>
       <NotAuthorized>
           <div class="nav-item px-3">
               <a class="nav-link" href="account/login" target="_top">
                   <span class="bi bi-terminal" aria-hidden="true"></span> Login
               </a>
           </div>
       </NotAuthorized>
   </AuthorizeView>

5. Save the changes and redeploy the Blazor Web Application.