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?
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
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.
@lykalabrada@jelbatnigi - I am seeing the similar issues with majority of the Angular JS applications integrated with okta … have you found any workaround or okta provided any way to fix this ?
@jelbatnigi@syedkarim - Note there is a difference between redirecting the the browser agent to the /authorize call (document), and being redirected to to /authorize (302).
When stating the browser agent needs to be redirected to /authorize that means the URL location of the browser window needs to change to /authorize.
Following a redirect (302) from a Fetch/xhr call will result in another Fetch/xhr call to the redirected location. It is still a CORS request as the browsers window location is not changing.
So if the call to http://locaalhost:5000/api/get is done as an xhr request, and /api/get does a 302 to /authorize, then the call to /authorize will still be an xhr request (CORS).
The cause of my issue is the incorrect domain issuer, found out from the documentation that:
Okta has two types of authorization servers: the Org Authorization Server and Custom Authorization Server
I was using https://{domain}.oktapreview.com/oauth2/default which meant to be used only for Custom Authorization Server, but my app is using the “regular” Org Authorization Server. I just removed that /default and things worked out for me.
