Description
The `Access-Control-Allow-Credentials` header indicates whether the browser should include credentials (such as cookies, authorization headers, or TLS client certificates) when making cross-origin requests. When a frontend makes a request with credentials (e.g. cookies), the browser checks for this header. The browser first sends an OPTIONS request, if this preflight response includes `Access-Control-Allow-Credentials: true`, the browser then proceeds to send the actual request. The server's response to this actual request must *also* include `Access-Control-Allow-Credentials: true` for the browser to expose the response to the frontend JavaScript code.
Syntax & allowed values
-
Access-Control-Allow-Credentials: true
Code examples
SERVER
// Express.js (Node.js) example (server-side)
const express = require('express');
const app = express();
// Middleware to handle CORS with credentials
app.use((req, res, next) => {
// Set specific origin (cannot use wildcard '*' with credentials)
res.setHeader('Access-Control-Allow-Origin', 'https://your-frontend-domain.com');
// Critical: Set Access-Control-Allow-Credentials to true
res.setHeader('Access-Control-Allow-Credentials', 'true');
// Handle preflight requests (OPTIONS)
if (req.method === 'OPTIONS') {
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
return res.status(204).end();
}
next();
});
app.get('/data', (req, res) => {
res.json({
message: 'This is CORS-enabled data with credentials support!',
});
});
const port = 3001;
app.listen(port, () => {
console.log(`Server running on port ${port}`);
}); CLIENT
// JavaScript Fetch API example (client-side)
fetch('https://api.example.com/data', {
method: 'GET',
credentials: 'include', // This sends cookies and other credentials
headers: {
'Content-Type': 'application/json',
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error)); Common errors & fixes
The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.
Ensure the server is configured to send `Access-Control-Allow-Credentials: true` for credentialed requests. This header must be on the actual response, and also on the preflight (OPTIONS) response if one is made.
Cannot use wildcard in Access-Control-Allow-Origin when credentials support is true.
When `Access-Control-Allow-Credentials` is `true`, the `Access-Control-Allow-Origin` header must specify a single, explicit origin (e.g., `https://your-frontend.com`), not the wildcard `*`. Also, consider adding `Vary: Origin` to the response to ensure correct caching behavior.
Preflight response for a credentialed request is missing the 'Access-Control-Allow-Credentials' header.
If a preflight (OPTIONS) request is made, its response must include `Access-Control-Allow-Credentials: true`.
Actual response for a credentialed request is missing the 'Access-Control-Allow-Credentials' header.
The response to the actual request (e.g., GET, POST) must include `Access-Control-Allow-Credentials: true`.
Frequently asked questions
Is `false` allowed as a value for this header?
No, the specification states that the only valid value for the `Access-Control-Allow-Credentials` header is the literal string `true`. If you want to indicate that credentials are not allowed or not supported for the request, you should omit the header entirely rather than setting it to `false`.
What exactly do 'credentials' refer to in this context?
In the context of CORS and `Access-Control-Allow-Credentials`, 'credentials' most commonly refer to HTTP cookies. However, the term also encompasses other types of authentication information that can be managed by the browser, such as HTTP authentication schemes (e.g., Basic, Digest authentication) and TLS client certificates.