What is Web CORS in HTML5 ?

CORS in HTML5 stands for Cross-Origin Resource Sharing. CORS is a mechanism that allows a website on one URL to request data from a different URL in the form of image, text, or even an API. This is an HTTP-header-based mechanism that limits the server to load resources from any other ports or domains other than itself. Let’s understand it with an example:

Explanation :

• In the image, we can clearly see that the website geeksforgeeks is making two requests. One is from the URL www.geeksforgeeks.com/api. This URL falls under the same domain as geeksforgeeks.com so this request will not come under the CORS mechanism.
• In the second request, it looks for the URL anotherdomain.com. As it does not come under the same domain as geeksforgeeks.com it will fall under the CORS mechanism of the browser and the browser may block this request.

Origin header to the request :

• When the browser makes a request it adds an origin header to the request message. if that request goes to a server on the same origin then it is allowed by the browser without any trouble.
• If that request goes to a different URL then it is known as a Cross Origin Request.
• In response to every request, the server will add the access-control-allow-origin header to the response object.
• The value of this access-control-allow-origin header of the response must match with the origin header of the request object or the requested server must allow all domains.
• In any other case, the browser will stop sharing the response data with the client and throw a CORS error.

Image of the Origin header in a request

Errors and the Browser Policy : 

• The CORS error has annoyed both the front-end and the back-end developers since the very beginning of the internet. Your website may try to fetch data from another API and end up having the CORS error in the console. That happens because the browser always implements the same origin policy as part of its security model.

CORS ERROR IMAGE

• This policy allows a website to freely request data from the URLs associated with the same domain but blocks anything from an URL associated with another domain unless we validate certain conditions.

Fix the CORS error : 

We have to use a CORS middleware inside our Node.js application to fix this error from our server-side. That will allow us to change the access-control-allow-origin header of the response object sent from our server.

• Install the CORS package and express.js using npm or yarn.

npm install express
npm install cors

• Use the cors function to change the access-control-allow-origin header using the origin keyword.

Javascript

// Import Express
const express = require('express');

// Create the Express App
const app = express();

// Import CORS
const cors = require('cors');

// Set the access-control-allow-origin header
// for all the responses sent from this URL
// Using the origin keyword
app.use(cors({ origin: 'http://desired.url' }));