CORS Error When Attempting Cross-Origin Authentication with FastAPI Integration

[Pediatra]

I'm following the Web Application tutorial for FastAPI integration, but instead of using FastAPI to serve HTML, I'm trying to set a cookie for API authentication purposes.

However, when attempting to make a fetch request from the frontend to the API for authentication the endpoint tries to redirect to the authentication url but the following CORS error appears:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/authorize?.... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 400.

To resolve this, I’ve tried modifying the ALLOW_ORIGIN_REGEX environment setting to allow all origins, but the issue persists, and I continue receiving the CORS error.

Could you provide guidance on how to properly handle cross-origin requests for authentication in this setup, or if there is a way to enable cross-origin redirection in this case?

[fief-bailiff[bot]]

Hail, @Pediatra 👋 Welcome to Fief's kingdom!

Our team will get back to you very soon to help.

In the meantime, take a minute to star our repository ⭐️

Want to support us?

Subscribe to one of our paid plan to help us continue our work and receive exclusive information and benefits! Starts at $5/month 🪙

Farewell!

[frankie567]

The authorize page is not designed to be fetched by JavaScript: you should redirect the user to this page.

Actually, even if you don't serve HTML through FastAPI, the process is the same: the backend will set the cookie and redirect the user to a page. You can very well redirect to your frontend app at this stage.

Another approach is to let the frontend app get the token and pass it manually to the backend, as explained in the browser example: https://docs.fief.dev/integrate/javascript/frontend/browser/