How Does the Access-Control-Allow-Origin Header Work?

The Access-Control-Allow-Origin header is a fundamental component of Cross-Origin Resource Sharing (CORS) that enables web browsers to safely allow websites from one origin to request resources from another origin.

An origin consists of three components: protocol (scheme), hostname, and port. For example, https://www.tutorialspoint.com:443 represents a complete origin, not just the hostname.

How CORS Works

CORS uses HTTP headers to inform browsers which origins are permitted to access resources from a server. Here's how the process works:

• Origin A (e.g., https://www.tutorialspoint.com) wants to request resources from Origin B (e.g., http://api.example.com)

• The browser blocks this request by default to maintain security

• Origin B must include the Access-Control-Allow-Origin header in its response to explicitly allow Origin A to access its resources

Who Sets the Access-Control-Allow-Origin Header?

The server hosting the resources (Origin B) must set this header. Consider a scenario where a music website tries to access your bank account in the background. The bank's server must include the Access-Control-Allow-Origin header to control which origins can access its resources, protecting users from malicious cross-origin requests.

Types of CORS Requests

Simple Requests

Simple requests use standard HTTP methods (GET, POST) with basic headers. The server responds directly with the Access-Control-Allow-Origin header.

Preflight Requests

Non-simple requests require a preflight OPTIONS request when they use:

• HTTP methods other than GET or POST (e.g., PUT, DELETE)

• Custom headers beyond basic ones (Accept, Accept-Language, Content-Language, Content-Type with limited values)

Example preflight request:

OPTIONS /api/data HTTP/1.1
Origin: http://tutorialspoint.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type

Server response allowing the request:

Access-Control-Allow-Origin: http://tutorialspoint.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

Common Configuration Values

Example Implementation

Here's a Node.js Express server that restricts access to tutorialspoint.com:

const express = require("express");
const app = express();

app.use((req, res, next) => {
   res.setHeader("Access-Control-Allow-Origin", "https://tutorialspoint.com");
   res.header(
      "Access-Control-Allow-Headers",
      "Origin, X-Requested-With, Content-Type, Accept"
   );
   next();
});

app.get("/api/data", (req, res) => {
   res.json({ message: "Welcome to Tutorialspoint API!" });
});

app.listen(5000, () => console.log('Server running on port 5000'));

To allow all origins (less secure), change the header to:

res.setHeader("Access-Control-Allow-Origin", "*");

Conclusion

The Access-Control-Allow-Origin header is essential for controlling cross-origin resource sharing in web applications. It must be set by the server hosting the resources and should specify allowed origins explicitly for better security rather than using the wildcard (*) value.