I am trying retrieve a user's profile from the front-end from various oauth2 sources. For Discord, the server refuses to process the request, resulting in a CORS error.
I already have my flow implemented and working for Google, so I know it is correct in principle. For discord it fails in step 4 however. The flow:
- User logs in, providing a token
- User visits profile page
- Profile page (front-end) inspects token info looking for the oauth provider's base url
- Profile page appends
/.well-known/openid-configuration
and requests the URL's contents. Headers:{ Accept: "application/json; charset=utf-8", "Accept-Encoding": "identity" }
- Using the openid confugration, find the userinfo endpoint, query it for its data plus the token. Done.
async function getUserProfile( wellKnownBase: string, providerToken: string,): Promise<ProviderProfile> { const wellKnownConfiguration = "/.well-known/openid-configuration"; const wellKnown = `${wellKnownBase}${wellKnownConfiguration}`; const headers = { Accept: "application/json; charset=utf-8", "Accept-Encoding": "identity" }; const configurationResponse = await fetch(wellKnown, { headers }); ...}
Firefox does the below request:
$ curl 'https://discord.com/.well-known/openid-configuration' --compressed -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:137.0) Gecko/20100101 Firefox/137.0' -H 'Accept: application/json; charset=utf-8' -H 'Accept-Language: nl,en-US;q=0.7,en;q=0.3' -H 'Accept-Encoding: gzip, deflate, br, zstd' -H 'Referer: http://localhost:4200/' -H 'Origin: http://localhost:4200' -H 'DNT: 1' -H 'Connection: keep-alive' -H 'Sec-Fetch-Dest: empty' -H 'Sec-Fetch-Mode: cors' -H 'Sec-Fetch-Site: cross-site' -H 'Priority: u=4' -H 'Pragma: no-cache' -H 'Cache-Control: no-cache'
Firefox claims Discord fails due to CORS Missing Allow Origin. However, removing the Accept-Encoding header or setting it to identity fixes it. How do I fix this?
How now I am working around it by hardcoding the discord well known configuration, but this isn't ideal.