SAML redirect Getting CORS error

[markusr]

I have created a new app.

Single sign on url: http://localhost:2000/api/auth/saml/callback

I am testing using localhost and getting the dratted CORS error:

Access to XMLHttpRequest at ‘https://mycompany.okta.com/app/mycompanyorg1234567_myapp_…’ (redirected from ‘http://localhost:2000/api/auth/saml’) from origin ‘http://localhost:3000’ 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.

const apiBaseUrl = 'http://localhost:2000/api/auth/saml';
const { username }= email;
const payload = {
  username
};

axios
  .post(apiBaseUrl, payload)

What did I miss?

[markusr]

(Had to add this second post because as a newbie I was limited on the number of urls in my post)

Under Security->API->Trusted Origins I have added

http://localhost:2000 type: CORS (backend api)
http://localhost:3000 type: CORS (frontend)

But still gives me the issue.

[phi1ipp]

have you tried to open the URL in question with your browser directly? Are you sure it’s correct one?

[markusr]

yes, it works well. So I am able to test from the URL that is being blocked by the CORS error. I just don’t understand the CORS error since I have localhost as a trusted origin.

[phi1ipp]

CORS can be cause by incorrect URL, unsupported method and other things also, hence the question I asked. I guess you will have to figure what is different between your original request, and the one which fails

[markusr]

If I click on the failed link and “open in new tab” it works.

[phi1ipp]

Well, usually SAML works by redirecting users to IdP, rather than doing background requests. Does it work for you if you go this route?

As I mentioned, there might be many different things involved into CORS error. It’s not only about adding localhost into trusted origins, so you can spend a lot of time trying to find a difference in your request from browser and async (maybe some headers or cookies are missed)

[markusr]

Thanks for your patience. This is a nodejs application. The front-end and back-end are separated. The front-end just has a login box. Using axios I call the nodejs backend, which in turn, redirects to Okta. The user logs in to Okta. It comes back to the back-end and is passed to the front-end.

[phi1ipp]

Can you not capture redirect response from your backend and do agent redirect, instead of axios redirect?

[markusr]

Thanks, Axios did appear to be the problem.