Blocked by CORS policy when redirect to /authorize

I have a dotnet core app that implements the authorization code workflow

When the application receives a call to one of its endpoints say
http://localhost:5000/api/get

it redirects to /authorize endpoint to authenticate the caller and returns an access token.
This works fine directly from the browser.

But when I make the call from my angular app http://localhost:4200 I get the following error

Access to XMLHttpRequest at 'https://{dmain}.oktapreview.com/oauth2/auspx13uvjxxxxxx7/v1/authorize?client_id=0oar5j1xxxxxyMnrIO0h7&state=%2Fapi%2FDataQuality%2Fchecks&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fsignin-oidc&scope=openid%20groups%20profile%20email&nonce=evnonce&response_type=code' (redirected from 'http://localhost:5000/api/get') from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

I do have both http://localhost:4200 and http:localhost:5000 as trusted origins in OKTA.
I even enabled any origin in my dotnet core app
services.AddCors(opt =>
{
opt.AddPolicy(“CorsPolicy”,
builder =>
{
builder.AllowAnyMethod()
.AllowAnyHeader()
.SetIsOriginAllowed(origin => true) // allow any origin
.AllowCredentials();
});
});
any idea how to fix this?

could it be a reason? When making requests to the /authorize endpoint, the browser (user agent) should be redirected to the endpoint. You can't use AJAX with this endpoint. https://developer.okta.com/docs/reference/api/oidc/#authorize

I don’t think so…
It is a redirect.
When i call my endpoint http://localhost:5000/api/get
If there is no valid token it redirects to /authorize and this is where i get the error

http://localhost:5000/api/get -> 302
/authorize -> cors policy error

You need to add http://localhost:4200 to your org trusted origin CORS type

That’s the annoying part is that I already have it as trusted origin

Hi @jelbatnigi

The /authorize endpoint does not accept CORS requests and you should redirect the user directly to the endpoint and, from there, Okta will redirect the user back to the callback endpoint, along with either the authorization code or JWTs.

Alternatively, you can use postMessage() to get the details automatically through an iframe. You can find here a sample script for this use-case.

Hi dragos,
I am not sure what you mean by “you should redirect the user directly to the endpoint”.

I think I am doing that already
the user request the API http://locaalhost:5000/api/het -----> 302
this api redirects the call to the /authorize end point and this is where I am getting the CORS policy error

only when I call my API from the angular app (origin http://localhost:4200)
if I invoke my API directly from the browser it works. only when it gets invoked from the angular client the redirection doesn’t work.