No 'Access-Control-Allow-Origin'

[quinterocar]

I am developing a SPA (Single Page Application). I am trying to make some Axios calls for acquiring some properties(such as “lastLogin”, “FirstName”, “LastName”, etc) of the user that has logged in into my app. I did the following steps:

• I Added an application with:
  • The login redirects URIs “http://localhost:3000/implicit/callback.
  • Initiate login URI “http://localhost:3000/”
• I already added an origin with the domain “http://localhost:3000/” in the API > Trusted Origins and enabled CORS and Redirect.
• Whenever I make a call to the OKTA through my app it gives me these errors :
  • GET https://dev-480978.okta.com/api/v1/users/00un69sxdXUjJs2df356 403 (Forbidden)
  • Access to XMLHttpRequest at ‘https://dev-480978.okta.com/api/v1/users/00un69sxdXUjJs2df356’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Although, if I make the call through my Browser or Postman works fine. It returns a JSON object. But not within my apply. According to the Okta’s documentation it is CORS enabled.
Hopefully you can help me with that.

I’d really appreciate your help,

Thanks,

[dragos]

Hi @quinterocar

Can you please send us an email to developers@okta.com in order for one of our Developer Support Engineers to further review the configuration?

[quinterocar]

Hi @dragos,

I actually sent an email a couple days ago. I am still waiting for a response. I just thought maybe it was a good idea also to post my issue here on the forum, so that way other developers could help, or be aware of this issue.

Thanks for the response,

[mrchess]

@quinterocar Did you ever get any info on this? I am running into the exact same issue.

[abroadhurst]

If you are still stuck then try removing the ‘/’ from the end when you add it to trusted sites. Okta checks if the slash is included or not and can reject the site is the slash is not included.

[montapas]

Did you get any solution? please respond

[dragos]

Hi @Montapas

Can you please provide a snippet of your code and a screenshot from the browser JavaScript console?

[montapas]

 this.signIn = new OktaSignIn({
      /**
       * Note: when using the Sign-In Widget for an ODIC flow, it still
       * needs to be configured with the base URL for your Okta Org. Here
       * we derive it from the given issuer for convenience.
       */
 
      baseUrl:https://xxxx,okta.com
      clientId: xxxxx,
      redirectUri:https://xxxx,okta.com/implicit/callback,
     // logo: '/assets/angular.svg',
      i18n: {
        en: {
          'primaryauth.title': 'Sign in to Synchub',
        },
      },
      authParams: {
         responseType: ['id_token', 'token'],
        issuer: this.oktaBaseUrl,//sampleConfig.oidc.issuer,
        display: 'page',
        scopes: sampleConfig.oidc.scope.split(' '),
      },
    });

[montapas]

[andreaskouras]

Have you added your application’s domain as a Trusted Origin for CORS requests in Okta?

[montapas]

No and client will not allow this. Can you please help me how to use web sso for angularjs i found one solution but getting 404 error after authentication

[dragos]

Hi @montapas

In order to have successful authentication inside the Angular application, you must enable CORS as the Angular SDK uses front-end channel (browser) requests in order to communicate with Okta and retrieve the user’s details.

Alternatively, you can create an API gateway which will forward all /userinfo endpoint through a back-end channel (server), removing the necessity for CORS enablement. This will also require a custom getUser() method.

[montapas]

Thank you for your reply. I have implemented back end and and also cors still getting same error
Suppose my angular js url is localhost:4200 and api url is localhost:8080/api.

What url will be in trusted site?

Pls help

[dragos]

Hi @montapas

Can you please open a support case with us through an email to developers@okta.com, mentioning the Okta tenant, application ID and an uncensored screenshot from the browser’s JavaScript console? One of our Developer Support Engineers will take over the ticket and further assist you.