Cross-Origin Resource Sharing (CORS) is a security feature implemented in web browsers to prevent web pages from making requests to a different origin (domain, protocol, or port) than the one the web page was loaded from. In this tutorial, we will explore how CORS works, why it’s necessary, and how to implement it in a Node.js application using Express.
What is CORS?
CORS is a mechanism that allows a web page to make requests to a different origin than the one it was loaded from. This is useful when you want to fetch data from an API hosted on a different domain or make requests to a server-side application from a client-side web page.
How does CORS work?
When a web page makes a request to a different origin, the browser sends an OPTIONS request to the server before sending the actual request. This is known as a preflight request. The server responds with a set of headers that indicate which methods and headers are allowed. If the server allows the request, the browser will then send the actual request.
Implementing CORS in Express
To implement CORS in an Express application, you need to add the necessary headers to your responses. You can do this using middleware functions or by adding the headers manually to each response.
Using Middleware
One way to implement CORS is to use a middleware function that adds the necessary headers to each response. You can use the cors package from npm to achieve this:
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
This will add the following headers to each response:
Access-Control-Allow-Origin: allows requests from any originAccess-Control-Allow-Methods: allows GET, HEAD, PUT, PATCH, POST, DELETE requestsAccess-Control-Allow-Headers: allows any headers
Adding Headers Manually
Alternatively, you can add the necessary headers manually to each response. For example:
const express = require('express');
const app = express();
app.all('*', (req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
next();
});
This will add the Access-Control-Allow-Origin and Access-Control-Allow-Headers headers to each response.
Preflight Requests
As mentioned earlier, browsers send a preflight request (OPTIONS request) before sending the actual request. This is done to check if the server allows the request. To handle preflight requests, you can add an OPTIONS route to your application:
app.options('*', cors());
This will allow the browser to make preflight requests and receive the necessary headers in response.
Example Use Case
Let’s say you have a client-side web page that makes a GET request to an API hosted on a different domain. To enable CORS, you can add the cors middleware to your Express application:
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ data: 'Hello World' });
});
In this example, the cors middleware adds the necessary headers to each response, allowing the client-side web page to make requests to the API.
Conclusion
In conclusion, CORS is an important security feature that prevents web pages from making requests to a different origin than the one they were loaded from. To implement CORS in an Express application, you can use middleware functions or add the necessary headers manually to each response. By understanding how CORS works and implementing it correctly, you can enable your client-side web pages to make requests to APIs hosted on different domains.