Facing CORS error when fetching (from Front END) APIs (endpoints using requiresAuth()) in Express Server

[ranjan.pratik21]

I am getting CORS Error, when I am tryong to call an endpoint fromm my ExpressJS Server… which is using requiresAuth() for auth0 authentication.
The error console is as follows:
“”“”““Access to fetch at ‘https://…’ (redirected from ‘http://localhost:3000/twitterbookmarker/showUserBookmark’) from origin ‘http://localhost:5500’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.””“”“”

My Express Server is running at : http://localhost:3000
My Front End Code is running at: http://localhost:5500

I went through a community question with a similar issue, but the issue is unresolved:

No 'Access-Control-Allow-Origin' header issue

This is still an issue for me. I’m using my Nodejs API which has a route which redirects me to the login page. This is what happens localhost:3000/auth/login2 → localhost:5000/auth/login2 → calls the Auth0 Passport Strategy But I don’t get redirected to login in the react front-end as this is the error I get.

Also, http://localhost:5500 has been added to both “Allowed Web Origins” and “Allowed Origins (CORS)” in the application settings.

Please try and resolve this issue or guide me if it’s a mistake from my side ASAP, since it is a blocker.

[badbread]

@ranjan.pratik21 have you found the way to resolve the issue? I am facing the same one

[nik.baleca]

Hi @ranjan.pratik21

Welcome to the Auth0 Community!

I am sorry about the late reply to your inquiry.

It appears that you are making an XMLHttpRequest or Fetch 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:

• What is CORS? Complete Tutorial on Cross-Origin Resource Sharing
• javascript - No ‘Access-Control-Allow-Origin’ header is present on the requested resource error - Stack Overflow

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