Access-Control-Allow-Headers

Description

The Access-Control-Allow-Headers (ACAH) header specifies which headers can be used in the actual cross-origin request. This header is part of the preflight request mechanism. When you send a cross-origin request with non-safelisted headers, the browser will make a preflight request to see if the actual request can be sent. To allow the request, the server must respond with the appropriate `Access-Control-Allow-Headers` containing the allowed headers.

Syntax & allowed values

• Access-Control-Allow-Headers: X-API-Key, X-Trace-Id
• Access-Control-Allow-Headers: Content-Type
• Access-Control-Allow-Headers: *

Code examples

// Express.js (Node.js) example (server-side)
const express = require('express');
const app = express();

// Middleware to handle CORS headers for preflight requests
app.use((req, res, next) => {
  // Allow requests from a specific origin
  res.setHeader('Access-Control-Allow-Origin', 'https://your-frontend-domain.com');
  
  // Handle preflight OPTIONS requests
  if (req.method === 'OPTIONS') {
    // Specify which headers are allowed in the actual request
    res.setHeader('Access-Control-Allow-Headers', 'X-API-Key, X-Trace-Id, Content-Type');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.status(204).send();
    return;
  }
  
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled data with custom headers!' });
});

const port = 3001;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// JavaScript Fetch API example (client-side)
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'X-API-Key': 'your-api-key',
    'X-Trace-Id': 'trace-123',
    '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

Related headers

• Access-Control-Request-Headers
• Access-Control-Allow-Methods

Frequently asked questions