Failed to fetch - request has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

[karthikvarmak1]

https://github.com/Chainlit/chainlit/blob/1d3ffd4d2fde08d15b90b115aa7da80e88515dfc/libs/react-client/src/api/index.tsx#L77

I am getting the below issue in the browser console after session cookie/token expires.

Access to fetch at 'https:///as/authorization.oauth2?approval_prompt=force&client_id=ITSIKMMETC_ZuluAccelerationPortal_OIDC_SI&code_challenge=f-JknuSdFLW7uCyQVYf54OuSqxUI9VY8oIy5cDHGTgY&code_challenge_method=S256&redirect_uri=https%3A%2F%2Fsampleapp.xyz.com%2Foauth2%2Fcallback&response_type=code&scope=openid+email+profile&state=EYD6_FUTAmTcEba3L3g8XlsbFmVDvSqZTDQCklUYJNQ%3A%2Fauth%2Fconfig' (redirected from 'https://sampleapp.xyz.com/auth/config') from origin 'https://sampleapp.xyz.com' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

[dosubot[bot]]

Hey @karthikvarmak1! I'm here to help you with your bug, answer questions, and even guide you on becoming a contributor. Let's squash those bugs together!

The issue you're encountering is related to CORS settings on the server. The Content-Type header is not allowed in the Access-Control-Allow-Headers of the preflight response. To resolve this, you need to configure the server to include Content-Type in the Access-Control-Allow-Headers.

Here's what you can do:

1. Update CORS Configuration: Ensure that the server's CORS configuration includes Content-Type in the Access-Control-Allow-Headers. This is typically done in the server's middleware setup.

2. Check Server Code: If you're using FastAPI, you can modify the CORS middleware settings like this:

   from fastapi.middleware.cors import CORSMiddleware
   
   app.add_middleware(
      CORSMiddleware,
      allow_origins=["*"],  # Update with specific origins in production
      allow_credentials=True,
      allow_methods=["*"],
      allow_headers=["Content-Type", "Authorization"],  # Add other headers as needed
   )

3. Verify Preflight Requests: Ensure that the server correctly handles OPTIONS requests, which are used for preflight checks.

By making these changes, the server should allow the Content-Type header, resolving the CORS issue.

To continue talking to Dosu, mention @dosu.