'Silent authentication on Auth0 CORS error

For a particular need, I need to do a silent authentication (prompt=none) on auth0 from the front and redirect response to my back. After that my back will exchange the authorization code to the Access Token and retrieve it to the front (this process is not common, but my problem focuses on the first request).

To implement this I use a "fetch" as follows:

const silentLoginUrl: string = 'https://xxx.us.auth0.com/authorize?response_type=code&client_id='+client_id+'&redirect_uri=http://localhost:3000/callback&scope=openid&state='+state+'&code_challenge='+code_challenge+'&code_challenge_method=S256&prompt=none';
fetch(silentLoginUrl, {
     method: 'GET',
     credentials: 'include',
     redirect: 'follow',
     headers: {
       'Content-Type': 'text/html; charset=utf-8'
     },
   })

I also configure auth0 with http://localhost:8080, http://localhost:8080/, http://localhost:3000/callback (8080 is my Single Page Application) in Allowed Web Origins and Allowed Origins (CORS).

But when I test I still get a CORS error on the preflight (OPTIONS) request : 404 : Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

And indeed there is no header "Access-Control-Allow-Origin" in the response despite the auth0 configuration.

And if I directly execute the forged url in my browser everything works fine.

Have you encountered this type of error? Is it possible to make this call through a GET fetch?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source