Revision 1134025 of Access-Control-Allow-Credentials

  • Revision slug: Web/HTTP/Headers/Access-Control-Allow-Credentials
  • Revision title: Access-Control-Allow-Credentials
  • Revision id: 1134025
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{HTTPSidebar}}

The Access-Control-Allow-Credentials response header indicates whether or not the response to the request can be exposed to the page. It can be exposed when the true value is returned; it can't in other cases.

Credentials are cookies, authorization headers or TLS client certificates.

When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple {{HTTPMethod("GET")}} requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.

The Access-Control-Allow-Credentials header works in conjunction with the {{domxref("XMLHttpRequest.withCredentials")}} property or with the credentials option in the {{domxref("Request.Request()", "Request()")}} constructor of the Fetch API. Credentials must be set on both sides (the Access-Control-Allow-Credentials header and in the XHR or Fetch request) in order for the CORS request with credentials to succeed.

Header type {{Glossary("Response header")}}
{{Glossary("Forbidden header name")}} no

Syntax

Access-Control-Allow-Credentials: true

Directives

true
The only valid value for this header is true (case-sensitive). If you don't need credentials, omit this header entirely (rather than setting its value to false).

Examples

Allow credentials:

Access-Control-Allow-Credentials: true

Using XHR with credentials:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true); 
xhr.withCredentials = true; 
xhr.send(null);

Using Fetch with credentials:

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

Specifications

Specification Status Comment
{{SpecName('Fetch','#http-access-control-allow-credentials', 'Access-Control-Allow-Credentials')}} {{Spec2("Fetch")}} Initial definition

Browser compatibility

{{Compat}}

See also

  • {{domxref("XMLHttpRequest.withCredentials")}}
  • {{domxref("Request.Request()", "Request()")}}

Revision Source

<div>{{HTTPSidebar}}</div>

<p>The <strong><code>Access-Control-Allow-Credentials</code></strong> response header indicates whether or not the response to the request can be exposed to the page. It can be exposed when the <code>true</code> value is returned; it can't in other cases.</p>

<p>Credentials are cookies, authorization headers or TLS client certificates.</p>

<p>When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple {{HTTPMethod("GET")}} requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.</p>

<p>The <code>Access-Control-Allow-Credentials</code> header works in conjunction with the {{domxref("XMLHttpRequest.withCredentials")}} property or with the <code>credentials</code> option in the {{domxref("Request.Request()", "Request()")}} constructor of the Fetch API. Credentials must be set on both sides (the <code>Access-Control-Allow-Credentials</code> header and in the XHR or Fetch request) in order for the CORS request with credentials to succeed.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Header type</th>
   <td>{{Glossary("Response header")}}</td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Forbidden header name")}}</th>
   <td>no</td>
  </tr>
 </tbody>
</table>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">
Access-Control-Allow-Credentials: true
</pre>

<h2 id="Directives">Directives</h2>

<dl>
 <dt>true</dt>
 <dd>The only valid value for this header is <code>true</code> (case-sensitive). If you don't need credentials, omit this header entirely (rather than setting its value to <code>false</code>).</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>Allow credentials:</p>

<pre>
Access-Control-Allow-Credentials: true</pre>

<p>Using <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> with credentials:</p>

<pre class="brush: js">
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true); 
xhr.withCredentials = true; 
xhr.send(null);</pre>

<p>Using <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> with credentials:</p>

<pre class="brush: js">
fetch(url, {
  credentials: 'include' &nbsp;
})</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Fetch','#http-access-control-allow-credentials', 'Access-Control-Allow-Credentials')}}</td>
   <td>{{Spec2("Fetch")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<p>{{Compat}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("XMLHttpRequest.withCredentials")}}</li>
 <li>{{domxref("Request.Request()", "Request()")}}</li>
</ul>
Revert to this revision