CORS issues when using multiple local apps (localhost:<PORT>) to hit the same dev okta account

I have a single Okta dev instance. I configured one front-end application to use it during local development @localhost:9000 and it worked great!

Now I’m trying to set up a second front-end application @localhost:4000. I have them both configured to allow CORS and both Applications are configured for the implicit flow with the correct redirect_uris listed in the Applications section.

I’m using @okta/okta-react to handle the auth flow for both applications, but once I added the second localhost:PORT combo, I’m getting the same error for both during the auth flow (after successful redirect):

Failed to load No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4000' is therefore not allowed access.

Any help is appreciated!

Make sure both your app’s URIs are listed in API > Trusted Origins.

They are both listed and I think there’s some wires getting crossed because of it. My issue is the same as this other issue created a few weeks ago:

Once I added my second localhost:PORT combo, both apps started getting the same error. I clear browser cache and one begins to work, until I try to hit the auth flow with the other, and then I’m back to getting that error for both applications.

Thanks for the reply

Hey @charlieh, I just posted an answer on the question you linked to: Browser cached /oauth2/default/v1/keys causing CORB authentication error

It’s a known issue that we will fix. In the meantime, using separate Okta applications (separate client IDs) is a workaround.

1 Like


1 Like