So I’m running this tutorial:
And at the end there is error request from Angular App to API like this:
Access to XMLHttpRequest at ‘http://localhost:6060/api/messages/public’ from origin ‘http://localhost:4040’ has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
What else should be set?
Welcome to the Auth0 Community!
I am sorry about the late reply to your inquiry.
It appears that you are making an XMLHttpRequest to a different domain than your page is on. Due to the nature of CORS, for every request made to a domain, an HTTP cookie is attached to it, thus blocking the request that you are trying to makes.Also, any calls made to the /authorize endpoint should be made via front-channel HTTP requests. They should only be made via a redirect or other top-level browser navigation and this is why CORS is not supported at that API.
You can read more about CORS here:
As an proposed solution from this community post:
This is happening because of the CORS 3 (Cross Origin Resource Sharing) . For every HTTP request to a domain, the browser attaches any HTTP cookies associated with that domain. This is especially useful for authentication, and setting sessions. You are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.
JSONP ( JSON with Padding ) is a method commonly used to bypass the cross-domain policies in web browsers. You’re on domain example.com, and you want to make a request to domain example.nett . To do so, you need to cross domain boundaries. JSONP is really a simple trick to overcome the XMLHttpRequest same domain policy. So, instead of using XMLHttpRequest we have to use < script > HTML tags, the ones you usually use to load JavaScript files , in order for JavaScript to get data from another domain.
Instead of using browser redirect, you are sending asynchronous request which is the reason why Auth0 is not working for you and is giving you CORS error. OAuth endpoints aren’t meant to receive scripted ajax requests via XHR or Fetch or whatever. Instead, the user’s meant to be navigated to the endpoint and then navigated back. You can’t navigate users with XHR.
Hope this helps!
If you have any other questions, feel free to reply or post again on the community!
Kind Regards,
Nik
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.