CORS errors even when using trusted origin

Questions
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.

image
image.png749×744 34.7 KB

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 Likes
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.

1 Like
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

11

Count me in! I’m facing the same error!

12

Hi @huizarmx

Can you please send us an email to developers@okta.com to have this further investigated? Please mention in the email also the error that you get in the browser console and provide a HAR file as per the steps available here while doing the authentication or authorization flow.

This would help in investigating the cause of the issue and provide a solution.

13

I fixed this issue by doing the following in my .Net WebForms app:

  1. Set the “issuer” value under “authParams” to “default” in the signInWidgetConfig.
  2. In the application’s settings in Okta, be sure to check “Allow Access Token with implicit grant type”.
  3. Set the RedirectUri to the base url + “/authorization-code/callback”

I’ve also found that when working against the okta preview, my redirect URIs have to include a page name, such as http://localhost:8080/Default/authorization-code/callback - this is just in General Settings, it isn’t allowed in the Trusted Origins section.

14

I am also facing the same CORS issue discussed here. Has a fix or workaround been found?

15

It may the same issue as this (which we fixed): https://github.com/okta/okta-signin-widget/issues/541#issuecomment-507474696

@andrew or others, if you’re still seeing this error, please let us know!

1 Like
16

Make sure you provide the baseURL in LoginComponent as shown below:

export class LoginComponent implements OnInit {
widget = new OktaSignIn({
baseUrl: ‘https://dev-xxxx.okta.com’
});