Issues with CORS & Kong OIDC plugin

Recently started using Okta for A&A, but ran into some issues that I have been unable to resolve :

Trying to use Okta for OpenID connect authentication, along with Kong as an API gateway, using the OIDC plugin from Nokia.

Without disclosing too much info :

API is at https://api.example.com (served via Kong)
Frontend application is at fe subdomain of the same URL (didn’t supply full domain as new users can only post 5 links when creating a post…)

Backend services sit behind Kong at the given URL, and gets authentication via OIDC plugin on Kong.
Testing directly via browser works fine : https://api.example.com/test-application <- This redirects to Okta login, and then redirects back to the API call after successful login and retrieves the data as expected in browser.
Testing via react app doing a fetch does not : Fetch from the same URL in react gets a 302 to redirect from kong to okta. Then fails with the following error :

Access to fetch at ‘https%3A%2F%2Fexample.okta.com%2Foauth2%2Fmy-authorization-server%2Fv1%2Fauthorize%3Fresponse_type%3Dcode%26client_id%3DCLIENT_ID_REDACTED%26state%3DSTATE_REDACTED%26redirect_uri%3Dhttps%3A%2F%2Fapi.example.com%2Ftest-application%2F%26nonce%3DNONCE_DEDACTED%26scope%3Dopenid’ (redirected from ‘https://api.example.com/test-application’) from origin ‘null’ 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.

Suspect the issue is that the fetch is unable to redirect (since the whole application would have to redirect instead of just the current component). Any help / insight would be appreciated.

As a sidenote, I am trying to use Kong for the OIDC flow instead of the react plugin, as we would have many applications served via the same backend, and having one central point for the OIDC flow will simplify things in the long run.

It seems like Kong might not be sending the origin header. Also, make sure your URL is listed under API > Trusted Origins in your Okta dashboard.

URL is already added to Trusted Origins in the Okta dashboard. Idea idea how to have Kong send the origin header?

Hi @johann.venter

Based on the error message from the browser, your application is trying to access the /authorize endpoint of your custom authorization server through CORS. This endpoint is not CORS enabled.

The best solution is to redirect all requests to /authorize directly inside the browser or use postMessage to retrieve the details from Okta. You can find here a sample for postMessage().