React app No 'Access-Control-Allow-Origin' header is present on the requested resource.

[hxuanhung]

My React app is getting CORS error when I try to use a baseUrl of http://localhost:8091/fpt. I check the server and see that the server return 200 as indicated in the log line below.

| INFO: 172.24.0.1:61186 - "GET /fpt/.well-known/openid-configuration HTTP/1.1" 200 OK

The React App works okay for the default tenant at http://localhost:8091.

This is the error log from the Chrome, I also tried with Safari as well but same error.

Acess to fetch at 'http://localhost:8091/fpt/.well-known/openid-configuration' from origin 'http://localhost:3010' has been blocked by CORS policy: 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.

When I try to use a Chrome extension to disable cors. It works okay.

My React App is running at localhost:3010 and my fief container is also running with
- ALLOW_ORIGIN_REGEX=http://localhost:3010 or - ALLOW_ORIGIN_REGEX=http://.*localhost:[0-9]+

React code:

          <FiefAuthProvider
            baseURL={process.env.REACT_APP_FIEF_BASE_URL as string}
            clientId={process.env.REACT_APP_FIEF_DEFAULT_CLIENT_ID as string}
          >
            <AppRouter />
          </FiefAuthProvider>

REACT_APP_FIEF_BASE_URL=http://localhost:8091/fpt

[frankie567]

Well, it seems to be a bug from Fief 😅 Actually, for authentication routes, CORS is allowed for every origins, but limited to some paths:

fief/fief/apps/auth/app.py

Lines 42 to 49 in 8430b2e

	app.add_middleware(
	CORSMiddlewarePath,
	path_regex=r"^/api|^/\.well-known",
	allow_origins=["*"],
	allow_credentials=False,
	allow_methods=["*"],
	allow_headers=["Authorization", "X-Requested-With"],
	)

Clearly, the regex won't match routes with a sub-tenant. I'll fix this ASAP.

[frankie567]

Fixed in 3477c1b

The release is underway.

[frankie567]

Fixed since 0.24.1

[hxuanhung]

Great news! Btw, I want to ask if the fief react package support multi tennants? Say I want user to choose which workspace they want to log in to.

[frankie567]

If you have several tenants, you'll need to implement a mechanism to set the baseUrl and clientId of FiefAuthProvider. Another context provider could be a good candidate for this.