Access to XMLHttpRequest at 'https://dev-999999.oktapreview.com/oauth2/default/.well-known/openid-configuration' from origin 'https://localhost:4200' has been blocked by CORS policy

Hi,

I’m trying to implement authentication/authorization on an Angular Web App and I’m having a hard time using OKTA right now because I’m always getting an error saying :

Access to XMLHttpRequest at ‘https://dev-999999.oktapreview.com/oauth2/default/.well-known/openid-configuration’ from origin ‘https://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Even though I’ve added the URL https://localhost:4200 as a trusted origins by going to API > Trusted Origins (see the image as attachment).

Any idea what the problem might be?

Thanks,

Hi @fredaskida

Can you provide a code snippet with the call to /.well-known/openid-configuration endpoint? Also, can you mention the dev instance that you are using?

Hello,

I have what sounds like the same issue. I followed this guide

to create a template app implementing Okta authentication and everything works fine when served locally. I then followed the guide

to deploy to Firebase. The login button then produces the error:

Access to fetch at ‘https://dev-xxxxxx.okta.com/oauth2/default/.well-known/openid-configuration’ from origin ‘https://xxxxxxx.firebaseapp.com’ 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.

The origin URL ‘https://xxxxxxx.firebaseapp.com’ is included under “trusted origins” in the Okta API tab.


I’m at a dead end and would really appreciate any pointers how to diagnose further, thanks!