How does the 'Access-Control-Allow-Origin' header work?


Cross-origin resource sharing (CORS) is a browser mechanism that allows a web page to make AJAX requests to a different domain than the one it originated from. By default, web browsers restrict cross-origin requests due to security reasons.

The 'Access-Control-Allow-Origin' header is a response header that the server sends along with the fetched resource to inform the browser whether the resource is accessible from a different domain. Understanding how this header works is essential for enabling cross-origin access.

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

The 'Access-Control-Allow-Origin' header specifies which domains are allowed to access the resource. It can have three possible values:

  1. '*' (wildcard): The resource can be accessed from any domain. This is useful for public APIs that don't require any restrictions on access.
  2. A specific domain: The resource can only be accessed from a specific domain. This domain must match the Origin request header sent by the browser. For example, if the server sends 'Access-Control-Allow-Origin:', then only cross-origin requests originating from '' will be allowed.
  3. null: The resource can only be accessed from the same domain (origin).

Here's a code snippet illustrating how to set the 'Access-Control-Allow-Origin' header on the server side using some popular backend frameworks:

Node.js (Express.js)

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

        app.use((req, res, next) => {
            res.setHeader('Access-Control-Allow-Origin', '*');

        // Rest of the server code

PHP (Apache)

        header('Access-Control-Allow-Origin: *');

.NET (C#)

        protected void Application_BeginRequest()
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

Enabling Access-Control-Allow-Origin on Client Side

On the client side, you don't need to do anything specific to enable the 'Access-Control-Allow-Origin' header. The browser automatically handles it based on the response received from the server. However, there are a few things you can do to troubleshoot and handle CORS-related issues:


If you are making AJAX requests using XMLHttpRequest, you can set the 'withCredentials' property to 'true' to include cookies and HTTP authentication in the request:

        const xhr = new XMLHttpRequest();
        xhr.withCredentials = true; // Include cookies and HTTP authentication'GET', '', true);

Fetch API

If you are using the Fetch API, you can include the 'credentials' option set to 'include' to include cookies and HTTP authentication:

        fetch('', {
            credentials: 'include' // Include cookies and HTTP authentication
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error(error));

Controlling CORS with Additional Headers

The 'Access-Control-Allow-Origin' header is just one piece of the CORS puzzle. There are also other headers that you can use to control cross-origin access:


This header specifies the HTTP methods that are allowed when making cross-origin requests. For example:

        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');


This header specifies the additional headers that are allowed when making cross-origin requests. For example, if your requests include custom headers like 'X-Auth-Token', you need to include it in this header:

        res.setHeader('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, X-Auth-Token');


This header indicates whether the request can include credentials like cookies and HTTP authentication. To allow credentials, set it to 'true':

        res.setHeader('Access-Control-Allow-Credentials', 'true');


The 'Access-Control-Allow-Origin' header is an essential part of enabling cross-origin resource sharing and controlling which domains can access a resource. By understanding its semantics and how to set it on both the server and client side, you can ensure that your application works seamlessly across different domains.