HTTP headers | Access-Control-Allow-Credentials

The HTTP Access-Control-Allow-Credentials is a Response header. The Access-Control-Allow-Credentials header is used to tell the browsers to expose the response to front-end JavaScript code when the request’s credentials mode Request.credentials is “include”. Remember one thing when the Request.credentials is “include” mode browsers will expose the response to front-end JavaScript code if the Access-Control-Allow-Credentials is set true.

The Access-Control-Allow-Credentials header performs with the XMLHttpRequest.withCredentials property or with the credentials option in the Request() constructor of the Fetch API.

Note: Credentials are actually cookies, authorization headers or TLS(Transport Layer Security) client certificates.

Syntax:

Access-Control-Allow-Credentials: true

Directives: This header accept a single directive mentioned above and described below:

• true: This the only meaningful or you can say valid value for Access-Control-Allow-Credentials header. If this credentials is not required, then remove the header. Don’t put there Access-Control-Allow-Credentials: false. This directive is case sensitive true

Example:

• This is allowing the Access-Control-Allow-Credentials.

  Access-Control-Allow-Credentials: true

• This is using the xhr with credentials.

  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://www.geeksforgeeks.org/', true); 
  xhr.withCredentials = true; 
  xhr.send(null);

• This is using Fetch with credentials.

  fetch(url, {
    credentials: 'include'  
  })

To check this Access-Control-Allow-Credentials in action go to Inspect Element -> Network check the response header for Access-Control-Allow-Credentials like below, Access-Control-Allow-Credentials is highlighted you can see.

Supported Browsers: The browsers compatible with HTTP Access-Control-Allow-Credentials header are listed below:

• Google Chrome
• Internet Explorer
• Firefox
• Safari
• Opera