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]

chainlit/libs/react-client/src/api/index.tsx

Line 77 in 1d3ffd4

const headers: { Authorization?: string; 'Content-Type'?: string } = {};

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

Access to fetch at 'https://<oidc_issuer>/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]

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.