CORS Issues while testing on device

Gents,

So I have my Okta development account properly configured and things were looking great until I decided to test on an android device. I am working on a hybrid mobile app using ionic platform and wanted to achieve the following.

  1. A user opens the app and enters email and password in the login screen
  2. A call is made to okta using openid and Oauth2 javascript libraries (okta-auth-js and angular-oauth2-oidc)
  3. First I get a nonce then use the nonce to get authorization and ID token.
  4. Use authorization token to getUserInfo and then get more values from the ID token to populate user profile and settings.
  5. I plan to Use Okta Directory as my single source of truth, that is store user profiles on it. This is not a social app so I am not planning to use social login, at least not at the moment.
  6. Users can registered directly using their mobile device. When they register, a call is to Okta using a clientId to store profile info. After registration a user can login an access information from the resource server based on their role with their authorization token.
  7. I created an authorization server on Okta and use that for application specific authorization

All these work when I set the CORS to http://localhost:port and test on my local machine using the browser but fails, see error below:

Failed to load https://dev-xxxxxx.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://192.168.1.69:8100' is therefore not allowed access.
login.ts:83 AuthApiError {name: "AuthApiError", message: undefined, errorSummary: undefined, errorCode: undefined, errorLink: undefined, …}errorCauses: undefinederrorCode: undefinederrorId: undefinederrorLink: undefinederrorSummary: undefinedmessage: undefinedname: "AuthApiError"xhr: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "https://dev-751448.oktapreview.com/api/v1/authn", __zone_symbol__readystatechangefalse: Array(1), __zone_symbol__ON_PROPERTYreadystatechange: ƒ, __zone_symbol__xhrListener: ƒ, …}__proto__: Error
    at Object.<anonymous> (http://192.168.1.69:8100/build/vendor.js:172690:26)
    at __webpack_require__ (http://192.168.1.69:8100/build/vendor.js:55:30)
    at Object.<anonymous> (http://192.168.1.69:8100/build/vendor.js:65506:20)
    at __webpack_require__ (http://192.168.1.69:8100/build/vendor.js:55:30)
    at Object.apply (http://192.168.1.69:8100/build/vendor.js:172112:25)
    at __webpack_require__ (http://192.168.1.69:8100/build/vendor.js:55:30)
    at Object.<anonymous> (http://192.168.1.69:8100/build/vendor.js:171765:25)
    at __webpack_require__ (http://192.168.1.69:8100/build/vendor.js:55:30)
    at Object.<anonymous> (http://192.168.1.69:8100/build/vendor.js:171067:18)
    at __webpack_require__ (http://192.168.1.69:8100/build/vendor.js:55:30)

I have have added the http://192.168.1.69:8100 in my


but still no lock.

I am thinking I may have to implement a sever side app and use it as my authorization service that talks to Okta then use that URI on my Okta configuration. But that will be another service to manage which I would love to avoid. I know I am missing something and any help would be appreciated.

Can you try to set http://192.168.1.69:8100 in your trusted origins and see if it helps?

Changing configuration some more to see if that fix this new issue and I will accept the first as the correct answer to this problem.

How did you solve it?

Same problem here. Here’s the request:

General
	Request URL:https://dev-928137.oktapreview.com/api/v1/apps/0oadx8g38e3bAet2I0h7/users/00udnlrh5hxq6bLEJ0h7
	Request Method:OPTIONS
	Status Code:200 OK
	Remote Address:50.17.226.145:443
	Referrer Policy:no-referrer-when-downgrade
Response Headers
	Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
	Cache-Control:no-cache, no-store
	Connection:Keep-Alive
	Content-Length:0
	Date:Sun, 11 Feb 2018 18:39:52 GMT
	Expires:0
	Keep-Alive:timeout=5, max=100
	P3P:CP="HONK"
	Pragma:no-cache
	Public-Key-Pins-Report-Only: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"
	Server:nginx
	Set-Cookie:DT=DI0AQzpOYJnQ-ybRtvUfr465Q; Expires=Tue, 11-Feb-2020 18:39:52 GMT; Path=/; Secure
	Set-Cookie:JSESSIONID=09883C92DE1178B467273E2CDF02CBA7; Path=/
	Set-Cookie:JSESSIONID=09883C92DE1178B467273E2CDF02CBA7; Path=/; Secure
	Set-Cookie:sid=""; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Path=/
	Strict-Transport-Security:max-age=315360000
	X-Frame-Options:SAMEORIGIN
	X-Okta-backend:op1-apiapp02e.aue1s.internal
	X-Okta-Request-Id:WoCN@JETS0pJ1n8a049HSQAAADI
	X-Rate-Limit-Limit:10000
	X-Rate-Limit-Remaining:9998
	X-Rate-Limit-Reset:1518374451
Request Headers
	Accept:*/*
	Accept-Encoding:gzip, deflate, br
	Accept-Language:it-IT,it;q=0.9,en-GB;q=0.8,en;q=0.7,en-US;q=0.6
	Access-Control-Request-Headers:authorization
	Access-Control-Request-Method:GET
	Connection:keep-alive
	Host:dev-928137.oktapreview.com
	Origin:http://localhost:4200
	User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Error:

Failed to load https://dev-928137.oktapreview.com/api/v1/apps/0oadx8g38e3bAet2I0h7/users/00udnlrh5hxq6bLEJ0h7: 
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:4200' is therefore not allowed access.

Here’s my CORS settings on my dev page:


Any solution so far?

That endpoint v1/apps/:appId/users/userId isn’t CORS enabled, you need to use a server-side and an SSWS token to access appuser data.

Is this problem solved. I am having the same issue.

I had the same issue and now it works by changing the version of @okta/okta-react to “1.0.2”