Access-Control-Allow-Origin Header

Table of Content

• Syntax
• Directives
• Examples
• Browser Compatibility
• How to modify Access-Control-Allow-Origin header

The Access-Control-Allow-Origin header is part of the Cross-Origin Resource Sharing (CORS) specification, which enables secure cross-site request functionality across the web. Its main purpose is to indicate which origins are allowed to read the resource on a web page.

Syntax

The syntax for the Access-Control-Allow-Origin header is as follows:

Access-Control-Allow-Origin: *Copy

Or

Access-Control-Allow-Origin: <origin>Copy

Where <origin> is a single origin that may access the resource. The * wildcard allows all origins.

Directives

There are two primary directives for Access-Control-Allow-Origin:

1. <origin> : Specifies an origin. Only a single origin can be specified.

2. *: Any origin may access the resource. This might be used with Access-Control-Allow-Credentials, otherwise, the * literal is used in the header.

Examples

The following are some examples of how to use Access-Control-Allow-Origin header:

• Allowing any site to access your resource.

Access-Control-Allow-Origin: *Copy

• Allowing a specific website to access your resource.

Access-Control-Allow-Origin: http://specific.website.comCopy

Browser Compatibility

How to modify Access-Control-Allow-Origin header

ModHeader is an extension available for Chrome that allows you to modify and customize HTTP request headers. It can be particularly useful for testing CORS by setting Access-Control-Allow-Origin header.

1. Install ModHeader from the Chrome Web Store.

2. After installing, click on the ModHeader icon in the toolbar, and you will see input fields for 'Request Headers'.

3. Enter Access-Control-Allow-Origin in the 'Name' field and either * or a specific origin URL, like http://specific.website.com, in the 'Value' field.

4. Now, whenever Chrome makes a request to a server, it will include this header with the specified value.