Issue with Okta getting CORS issue redirecting to SPA(React)

Questions OAuth/OIDC
1

okta with spa
okta with spa1600×998 29.8 KB

Above is a rough diagram of my project structure. It is 2 .net web apps, one hosts an api connected to a database, the other only hosts the SPA static files. Both web apps authenticate through Okta. I’ve listed the expected workflow above.

The issue that I’m having is when I go to the SPA and get redirected to Okta to log in, I get a CORS error when it redirects from Okta to my SPA.

Error : Access to XMLHttpRequest at ‘OneOncology-dev-290965 - Sign In’ (redirected from ‘https://localhost:7044/api/menuItems’) from origin ‘https://localhost:7271’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

If I make an API call to my web api app from the browser, it redirects me to Okta, then redirects me back to the API route and returns the response. I want this same workflow when I go to the SPA.

2

It sounds like your app is trying to make a CORS request to the /authorize endpoint, but the /authorize endpoint doesn’t support CORS. Make sure your application is redirecting to Authorize instead