CORS errors even when using trusted origin


#1

I’m getting the following error when trying to login to my Okta SPA app. I removed my okta domain for privacy.

Failed to load https://{myOktaDomain}.oktapreview.com/api/v1/authn: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.

I’m using the sample angular code provided by Okta (https://github.com/okta/samples-js-angular/tree/master/custom-login)

I created a new app within Okta as shown below.

I assigned my account to the application.

I then went to Security > API > Trusted Origins and added a new origin.

image

Even though http://localhost:8080 is a trusted origin, I’m still getting CORS errors.


#2

https://{myOktaDomain}.oktapreview.com/api/v1/authn

I believe what happened here is that you haven’t set your values:

export default {
  oidc: {
    clientId: '{clientId}', //Replace this with your client ID
    issuer: 'https://{yourOktaDomain}.com/oauth2/default', //Replace this with your org domain (without -admin)
    redirectUri: 'http://localhost:8080/implicit/callback',
    scope: 'openid profile email'
  },
};

#3

I already changed the Okta config, I just didn’t include the code for privacy reasons. I included it below, but I used “mydomain” instead of the real value.

export default {
  oidc: {
    clientId: '0oav1jcos6ZvjhK4s2p6',
    issuer: 'https://mydomain.oktapreview.com/oauth2/default',
    redirectUri: 'http://localhost:8080/implicit/callback',
    scope: 'openid profile email'
  },
  resourceServer: {
    messagesUrl: 'http://localhost:8000/api/messages',
  },
};

#4

That is weird. It looks like you are doing everything correctly.

Would you mind posting a trace of the network requests to and from Okta? You could use a tool like Fiddler/Charles, or copy them from your browser network panel.


#5
{
  "log": {
    "version": "1.2",
    "creator": {
      "name": "WebInspector",
      "version": "537.36"
    },
    "pages": [
      {
        "startedDateTime": "2018-03-22T23:19:41.100Z",
        "id": "page_2",
        "title": "http://localhost:8080/login",
        "pageTimings": {
          "onContentLoad": 2091.5139999997336,
          "onLoad": 2367.2680000017863
        }
      }
    ],
    "entries": [
      {
        "startedDateTime": "2018-03-22T23:20:12.670Z",
        "time": 195.02456098599941,
        "request": {
          "method": "OPTIONS",
          "url": "https://mydomain.oktapreview.com/api/v1/authn",
          "httpVersion": "HTTP/1.1",
          "headers": [
            {
              "name": "Access-Control-Request-Method",
              "value": "POST"
            },
            {
              "name": "Origin",
              "value": "http://localhost:8080"
            },
            {
              "name": "Accept-Encoding",
              "value": "gzip, deflate, br"
            },
            {
              "name": "Host",
              "value": "mydomain.oktapreview.com"
            },
            {
              "name": "Accept-Language",
              "value": "en-US,en;q=0.9"
            },
            {
              "name": "User-Agent",
              "value": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36"
            },
            {
              "name": "Accept",
              "value": "*/*"
            },
            {
              "name": "Connection",
              "value": "keep-alive"
            },
            {
              "name": "Access-Control-Request-Headers",
              "value": "content-type,x-okta-user-agent-extended,x-okta-xsrftoken"
            }
          ],
          "queryString": [],
          "cookies": [],
          "headersSize": 476,
          "bodySize": 0
        },
        "response": {
          "status": 200,
          "statusText": "OK",
          "httpVersion": "HTTP/1.1",
          "headers": [
            {
              "name": "X-Okta-Request-Id",
              "value": "WrQ6LFG4Hnl4nh7Hw0p2IQAABL4"
            },
            {
              "name": "Date",
              "value": "Thu, 22 Mar 2018 23:20:12 GMT"
            },
            {
              "name": "X-Rate-Limit-Limit",
              "value": "10000"
            },
            {
              "name": "X-Rate-Limit-Remaining",
              "value": "9999"
            },
            {
              "name": "P3P",
              "value": "CP=\"HONK\""
            },
            {
              "name": "Connection",
              "value": "Keep-Alive"
            },
            {
              "name": "Content-Length",
              "value": "0"
            },
            {
              "name": "Pragma",
              "value": "no-cache"
            },
            {
              "name": "Allow",
              "value": "GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH"
            },
            {
              "name": "Server",
              "value": "nginx"
            },
            {
              "name": "X-Frame-Options",
              "value": "SAMEORIGIN"
            },
            {
              "name": "Strict-Transport-Security",
              "value": "max-age=315360000"
            },
            {
              "name": "X-Okta-backend",
              "value": "op1-apiapp03e.aue1s.internal"
            },
            {
              "name": "Public-Key-Pins-Report-Only",
              "value": "pin-sha256=\"jZomPEBSDXoipA9un78hKRIeN/+U4ZteRaiX8YpWfqc=\"; pin-sha256=\"axSbM6RQ+19oXxudaOTdwXJbSr6f7AahxbDHFy3p8s8=\"; pin-sha256=\"SE4qe2vdD9tAegPwO79rMnZyhHvqj3i5g1c2HkyGUNE=\"; pin-sha256=\"ylP0lMLMvBaiHn0ihLxHjzvlPVQNoyQ+rMiaj0da/Pw=\"; max-age=60; report-uri=\"https://okta.report-uri.io/r/default/hpkp/reportOnly\""
            },
            {
              "name": "Cache-Control",
              "value": "no-cache, no-store"
            },
            {
              "name": "X-Rate-Limit-Reset",
              "value": "1521760872"
            },
            {
              "name": "Set-Cookie",
              "value": "sid=\"\"; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Path=/"
            },
            {
              "name": "Set-Cookie",
              "value": "JSESSIONID=A0ECA8201AEBAC11A103EB888E994F70; Path=/; HttpOnly"
            },
            {
              "name": "Set-Cookie",
              "value": "DT=DI0wbz9HSBNQSuvj77vJ-Az3w; Expires=Sat, 21-Mar-2020 23:20:12 GMT; Path=/; Secure"
            },
            {
              "name": "Set-Cookie",
              "value": "JSESSIONID=A0ECA8201AEBAC11A103EB888E994F70; Path=/; Secure"
            },
            {
              "name": "Keep-Alive",
              "value": "timeout=5, max=100"
            },
            {
              "name": "Expires",
              "value": "0"
            }
          ],
          "cookies": [
            {
              "name": "sid",
              "value": "\"\"",
              "path": "/",
              "expires": "1970-01-01T00:00:10.000Z",
              "httpOnly": false,
              "secure": false
            },
            {
              "name": "JSESSIONID",
              "value": "A0ECA8201AEBAC11A103EB888E994F70",
              "path": "/",
              "expires": null,
              "httpOnly": true,
              "secure": false
            },
            {
              "name": "DT",
              "value": "DI0wbz9HSBNQSuvj77vJ-Az3w",
              "path": "/",
              "expires": "2020-03-21T23:20:12.000Z",
              "httpOnly": false,
              "secure": true
            },
            {
              "name": "JSESSIONID",
              "value": "A0ECA8201AEBAC11A103EB888E994F70",
              "path": "/",
              "expires": null,
              "httpOnly": false,
              "secure": true
            }
          ],
          "content": {
            "size": 0,
            "mimeType": "text/plain",
            "compression": 0,
            "text": ""
          },
          "redirectURL": "",
          "headersSize": 1194,
          "bodySize": 0,
          "_transferSize": 1194
        },
        "cache": {},
        "timings": {
          "blocked": 2.662561013508818,
          "dns": 0.005999987479299751,
          "ssl": 87.7719999989493,
          "connect": 122.59499999345265,
          "send": 0.11700001778099534,
          "wait": 67.7639999776147,
          "receive": 1.879999996162951,
          "_blocked_queueing": 0.5609999934677035
        },
        "serverIPAddress": "54.225.80.174",
        "connection": "358128",
        "pageref": "page_2"
      }
    ]
  }
}

#6

Was there ever a solution for this as I have the same error?


#7

I didn’t find a solution. Since what I was building was just a prototype, I ended up hard coding a few usernames and passwords in my application instead of using Okta.


#8

Yeah, I’m having this same issue – CORS errors even when using the correct OIDC settings and a bone-stock React boilerplate app.

The thing is, it’s intermittent, and I feel like I’ve wasted enough time on this – I’m also considering ditching Okta. Can’t be wasting time on bugs in my IDP.


#9

Yeap, me too. I’ve setup CORS according to the tutorials and to what I see in this thread… I still get the same error as the OP.


#10

Just signed up to say I’m also getting this error…
I followed the tutorial for React from https://developer.okta.com/quickstart/#/react/nodejs/express
My config:
const config = {
issuer: ‘https://dev-927700.oktapreview.com/oauth2/default’,
redirect_uri: window.location.origin + ‘/implicit/callback’,
client_id: {clientId} // this is using my correct client Id
};

CORS should be enabled for http://localhost:3000

When I login, the screen flashes and then it says ‘AuthApiError’

In the console we have:

Access to XMLHttpRequest at ‘https://dev-927700.oktapreview.com/oauth2/default/.well-known/openid-configuration’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Does anyone know if this is the same issue reported here?

Thanks