If people for whatever reason cannot hit link, the issue is:
My React application (frontend) (not OKTA- enabled) is requesting data from my .Net Core 3.0 (backend) web API (is OKTA- enabled). When requesting a protected endpoint from my frontend app, I am getting a CORS error: ( some data ‘xx’-omitted for privacy)
“Access to XMLHttpRequest at ‘https://xx.oktapreview.com/oauth2/xx/v1/authorize?client_id=xx&redirect_uri=https%3A%2F%2Flocalhost%3A44300%2Fsignin-oidc&response_type=id_token%20token&scope=openid%20profile%20groups&response_mode=form_post&nonce=xxstate=xxSKU=ID_NETSTANDARD2_0&x-client-ver=220.127.116.11’ (redirected from ‘https://localhost:44300/api/project/all’) from origin ‘http://localhost:44350’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
I believe this is simply because I am calling the protected endpoint via a React API REST call, as typing “https://localhost:44300/api/project/all” into the browser triggers the redirect to login and then returns the correct data fine.
Is there a way I can have my React app call “API.get(
https://localhost:44300/api/project/all)” and that hit my backend, redirect to login on react app, and then once user logs in, return data from API as normal to React app from API backend?
I fear I may need to implement frontend OKTA auth too but I would like to avoid this if possible?
Also, my redirect and trusted origins are set up correctly as required: