CORS issue, trusted origins config ok

Questions API
,
1

Hi,

I’m trying to update a user through the “/api/v1/users/me” endpoint. When I test I get a CORS error by my browser.

Access to fetch at ‘https://[URL].okta.com/api/v1/users/me’ from origin ‘http://localhost:8000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I have following settings: Under API > trusted origins I added “http://localhost:8000” with CORS enabled.

Screenshot 2020-03-11 at 11.18.58
Screenshot 2020-03-11 at 11.18.582000×764 55 KB

I’m sure the user is logged.
My code in short:

const handleOnClick = async () => {

const accessToken = authState.accessToken
const response = await fetch(
  `https://[URL].okta.com/api/v1/users/me`,
  {
    method: "POST",
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json",          
      "Authorization": `Bearer ${accessToken}`,
    },
    body: JSON.stringify({
      profile: {
        nickName: "testNickname",
        middleName: "testMiddleName",
      },
    }),
  }
)}

Any idea what the issue might be?

1 Like
2

I think it maybe b/c it accepts different type of token (SSWS vs your Bearer) https://developer.okta.com/docs/reference/api/users/#update-current-user-s-profile

3

The “/api/v1/users/me” api is CORS enabled which I think means you can use a bearer token, correct?
I just got it to work by sending the cookie in the request with credentials: "include"
With this option it doesn’t even need any token, but I don’t know how this even works and/or if this is a security issue.

Following code works, but I don’t know why:

await fetch(
  `https://[url].okta.com/api/v1/users/me`,
  {
    method: "POST",
    cache: "no-cache",
    credentials: "include", // => includes the token in the request
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      profile: {
        nickName: "testNickname",
      },
    }),
  }
)

If anyone can explain this behaviour I would be grateful

4

Hi @kevin.v

The script, through credentials: include leverages the current active session in Okta and returns the details. If you would try this in a browser window where you don’t have a session, the /api/v1/users/me will return an invalid session error.

5

What’s the way to remove the CORS issue without using [credentials: “include”]? I am having the same issue, where my “http://localhost:8000” and “http://localhost:3000” are listed as a trusted origins, but I am still getting the same CORS issue, no matter what port I use.

6

@axelkouassi, what endpoint are you having this CORS issue with? Not all endpoints are CORS enabled

7

I created a custom API in Grails 2.4.5, it’s not an Okta API. I am assuming that maybe the back-end has to do some CORS configuration to allow the ReactJS front-end to hit any custom API. However, to hit that API, a user has to be authenticated first, so Okta is also set up with a different client id on the Front-End, but with the same authorization server sharing the same permissions and access policies.