CORS error in Ionic + jHipster + okta mobile app

2
votes

I have been following Matt Raible tutorial to build a mobile app using jHipster, Ionic and Okta.

https://developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster

However, I come across a CORS issue, whenever I try to login from the Ionic app. the web app login works perfectly.

I even tried to clone and execute the same set of steps mentioned in your git repo https://github.com/oktadeveloper/okta-ionic4-jhipster-example

But its the same error

Access to XMLHttpRequest at 'https://dev-xxxxxx.okta.com/oauth2/default/.well-known/openid-configuration' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Sign in error: Error: Unable To Obtain Server Configuration

enter image description here

I tried updating the src/main/resources/config/application.yml as shown in the below video https://www.youtube.com/watch?v=eS6Ti5Ft7JE

I even tried the @oktadev/schematics plugin https://www.npmjs.com/package/@oktadev/schematics

2
jhipster
As a work around, I have added 'localhost:8100' as a trusted origin in my Okta applicaton. But a real solution will be more helpful. - Biswadeep Basu

2 Answers

0
votes

My instructions say to add http://localhost:8100/implicit/callback as redirect URI when creating a native app. When you do this on app creation, a trusted origin of http://localhost:8100 is created for you. If you alter the redirect URI after you've created the app, no trusted origin is created. The solution you found is the real solution.

0
votes

Go to your trusted origins: https://dev-xxxxx-admin.oktapreview.com/admin/access/api/trusted_origins

And make sure you have http://localhost:8100 there as trusted origin