DuyM.47808 (Customer) asked a question.
Hi there,
Here is a full error show on browser console:
Access to XMLHttpRequest at 'https://org-ext.okta.com/oauth2/default/v1/authorize?client_id=0oa6sfy7e5mdKf9Z41d7&redirect_uri=https%3A%2F%2Fapplication.domain.com%2F.ambassador%2Foauth2%2Fredirection-endpoint&response_type=code&scope=openid+profile&state=a8549405dc93925cdad0dfcadc0524b293be7b5a0d322231d63a2740f89b7fa5%3Ahttps%3A%2F%2Fapplication.domain.com%2Fauths%2FssoLogin' (redirected from 'https://application.domain.com/api/auths/authMechanism?email=email@domain1.com') from origin 'https://application.domain.com' 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.
Let me explain our use case:
We have a frontend using React. Api gateway is Ambassador, is configured to do authentication with Okta.
We have 2 endpoints:
+ /api/auths/authMechanism?email=email@domain.com -> no authentication required, mapping to our internal service, is used to check if user should use okta or basic auth.
It will redirect to to /auths/ssoLogin if user has okta enabled.
+ /auths/ssoLogin -> authentication required. If we hit this endpoint directly, it will redirect to okta page to login. It works fine.
But the issue is when our frontend wraps those requests to XHR.
When we hit the button `Continue` browser (attachment), by following steps kicks in:
1. browser will send XHR https://application.domain.com/api/auths/authMechanism?email=email@domain1.com
2. Backend return redirect (303) to https://application.domain.com/auths/ssoLogin
4. Ambassador see that request that need to do authentication, so it will return redirect (303) to okta page (https://org-ext.okta.com/oauth2/default/v1/authorize...)
That's when error show up.
We also tried to add Trust Origin for `https://application.domain.com` in Okta but still get the error.
Any idea for fixing the error?
Thanks
Hi @DuyM.47808 (Customer) , Thank you for reaching out to the Okta Community!
Any reports of this kind went back to the Trusted Origins part, but you already mentioned doing that.
My advice would be to reach out to the dedicated Developer Forum devforum.okta.com to take advantage of their expertise.
While we'll do our best to answer all of your questions here, this medium is more inclined towards Okta core products and features.
Hope my answer helps!
--------------------------------
Community members help others by clicking Like or Select as Best on responses. Try it today.
@DuyM.47808 (Customer) Have you try redirct one time to Okta with same setting? as you told your flow is access https://application.domain.com/api/auths/authMechanism?email=email@domain1.com redirect to https://application.domain.com/auths/ssoLogin then redirect to Okta. Could you try only one redirect like only https://application.domain.com/auths/ssoLogin to Okta. I also meet this issue before.
This error typically occurs in web development when making cross-origin requests. This error is related to the same-origin policy implemented by web browsers for security reasons. The same-origin policy restricts web pages from making requests to a different domain unless the server explicitly allows it by including the 'Access-Control-Allow-Origin' header in the response. To resolve this issue, the server hosting the requested resource needs to include the appropriate 'Access-Control-Allow-Origin' header, specifying the domain or origins allowed to access the resource. This can be done by configuring the server's response headers or by using server-side middleware or frameworks that handle cross-origin requests.
JSON with Padding is just a way to circumvent same-origin policy, when CORS is not an option. This is risky and a bad practice. Avoid using this.
If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript, you can use a proxy server so that it sets the header Access-Control-Allow-Origin to *.
If you need to enable CORS on the server in case of localhost, you need to have the following on request header.
Access-Control-Allow-Origin: http://localhost:9999