'Access-Control-Allow-Origin' error when making GET request on /api/v1/users

[blueprintchris]

Hi,

I am fairly new to Okta and their API/libraries, so please bear with me if I sound stupid.

I am trying to make a GET request on /api/v1/users/ for Get User from Login through my React app. I am using Axios to make the call. I have created an API Token in Okta and set up http://localhost:3000 as a Trusted Origin within the Okta Developer Admin console.

Every time I try to make the request, I am getting the following errors back:

GET https://dev-910784.oktapreview.com/api/v1/users/my@email.com 403 (Forbidden)
Failed to load https://dev-910784.oktapreview.com/api/v1/users/my@email.com: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403.

I can safely use the okta-auth-js library to make authentication calls and that works perfectly. Any help on how I can solve this problem? I read somewhere that it might be because it can’t call this particular API on my front-end, and has to be done via a back-end service.

Thanks

[mraible]

You shouldn’t need to call the URL directly. There’s a getUser() method in the React SDK you can use.

[blueprintchris]

Is that providing that the user is already logged in?

[mraible]

Yes, and there’s other ways of detecting if a user is logged in or not. You can try doing our Bootiful Development with Spring Boot and React to learn more.

[blueprintchris]

I found the solution to my particular problem anyway.

I was making the request using axios as follows:

const headers = {
   "Authorization": `SSWS ${key}`
};

const response = await axios.get(uri, headers);

This was failing. Turns out I needed to arrange the headers like so:

const headers = {
   headers: {
      "Authorization": `SSWS ${key}`
   }
};

//then make the call the same way

const response = await axios.get(uri, headers);

Thanks.