CORS Error Solved: “Access to Fetch Has Been Blocked By CORS Policy. Response to Preflight Request Doesn’t Pass Access Control Check.”
Now, I bet you’ve already gone through a couple of tutorials looking for a solution for the famous “CORS error”. You have also taken a nap, come back and encountered the same issue.
Like me, you may have read articles and gathered that Cross-Origin-Resource-Sharing(CORS) is simply a mechanism that allows a website on one URL to request data from a different(external) URL. However, for security, browsers block this by default.
In a case where the client and server have a different origin from each other, (i.e., accessing resources from a different server), trying to make a request to a resource on the other server will fail. CORS adds a response header access-control-allow-origins and specifies which origins are permitted. CORS ensures that we are sending the right headers.
Now, you have tried every possible solution on the internet and still, no luck. It is important to note that app.use(cors()) should always be specified before app.use(‘/’,routes). This will allow all the routes to be accessed anywhere on the web if that is what you need.
This way, CORS is enabled, and when you make a request to your app, a header will be returned.
You’re welcome!
Find my previous article here: https://agnesmuita.medium.com/implementing-a-reusable-search-bar-in-reactjs-efb271148671
