CORS header ‘Access-Control-Allow-Origin’ missing although CORS is enabled

Questions
1

I am trying to call the authorize API endpoint from Angular (Ionic) in the browser (from http://localhost:8100/home), but I am getting CORS errors:

13:23:33.863 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dev-999999.okta.com/oauth2/default/v1/authorize?clie... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

13:23:33.865 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dev-999999.okta.com/oauth2/default/v1/authorize?clie… (Reason: CORS request did not succeed).

13:23:33.868
ERROR 
{…}
​
error: error { target: XMLHttpRequest, isTrusted: true, lengthComputable: false, … }
​
headers: Object { normalizedNames: Map(0), lazyUpdate: null, headers: Map(0) }
​
message: "Http failure response for https://dev-999999.okta.com/oauth2/default/v1/authorize: 0 Unknown Error"
​
name: "HttpErrorResponse"
​
ok: false
​
status: 0
​
statusText: "Unknown Error"
​
url: "https://dev-999999.okta.com/oauth2/default/v1/authorize"

My calling code:

    const params =
      new HttpParams()
        .set('client_id', 'xxxxxxxxxxxxxxxxxxx')
        .set('response_type', 'code')
        .set('scope', 'openid')
        .set('redirect_uri', 'http://localhost:8100/login/callback')
        .set('state', 'state-8600b31f-52d1-4dca-987c-386e3d8967e9')
        .set('code_challenge_method', 'S256')
        .set('code_challenge', 'qjrzSW9gMiUgpUvqgEPE4_-8swvyCtfOVvg55o5S_es');

    this.http.get('https://dev-999999.okta.com/oauth2/default/v1/authorize', {params}).subscribe(resp => {
      console.log(JSON.stringify(resp));
    });

I have added http://localhost:8100 as a trusted origin under API/Trusted Origins.
Why am I getting these errors?

2

Are you following a tutorial to integrate Okta into your Ionic app? Such as Tutorial: User Login and Registration in Ionic 4?

3

Yes, I got that sample working, but I want to host the login page within my Ionic app, not go out to an Okta website to log in. I am trying to call the API endpoints (authorize, token etc) directly. What I am ultimately trying to achieve is:

  • integration of okta into an Ionic 4 app
  • with a custom login form
  • using the Authorisation + PKCE flow
  • using refresh tokens so the user doesn’t have to log into the app every time
  • secure calls to back end custom APIs

Do you have any samples or documentation on how to achieve this? I haven’t found anything that ticks all those boxes.

4

No, we do not have any examples or documentation on how to achieve this. We currently do not have an SDK for Ionic. All I’ve been able to make work is Ionic AppAuth, which requires a redirect.

5

Have you try using the Okta wiget: https://developer.okta.com/code/javascript/okta_sign-in_widget/
I have had a simular circumstance of needing a custom login without a redirect and this worked out fine.