Have you ever requested data from some API but instead got an error like Cross-Origin Request Blocked? You might have also seen this while developing a full-stack application, and let’s take a look at it.
CORS is a mechanism implemented by browsers that block websites to request data from some other URL. When a browser makes a request, it adds an origin header to the request message. If it goes to the server of the exact origin, it is allowed by the browser; if it does not, the browser blocks it.
There are different types of requests that use CORS. For instance, the XMLHttpRequest or Fetch API both use CORS when invoked. The Web Fonts also require CORS to be enabled. If you use an image hosted on another server, it must be CORS compatible; otherwise, it will not render on the screen.x3
The browser ensures this type of strategy mainly because of security reasons. However, there are still ways to override it.
You can only fix the CORS error from the backend of the project. If it is a Node.js and Express.js backend, you can fix it by following steps:
Install the Node.js CORS middleware by running the following command in your project terminal:
npm install cors
Then you need to import this middleware into the file that is the entry point to your backend. You can do this by writing the following at the top of the file.
const cors = require(‘cors’)
You need to register CORS middleware in your app and provide it an origin. The origin is the URL of your front-end.
During cross-origin requests, the value of origin in the request header must match the value of Access-Control-Allow-Origin in the response header. The server sets the value of Access-Control-Allow-Origin. When you add an origin in the backend code, the CORS middleware uses it for cross-origin communication and only allows this URL to request resources from the server.