Why Is My API Request Failing? Fix HTTP Header Issues (Auth, CORS, Content-Type)

API calls are failing with no useful error message — just a 401, a 403, or a vague CORS block. In 90% of cases, the root cause is a missing or wrong HTTP header. Here are the 5 most common header-related API failures and exactly how to fix each one, with real code examples for JavaScript fetch, Axios, and cURL.

A 401 Unauthorized response almost always means the server did not receive a valid Authorization header. The header must be spelled exactly right and the value format must match what the API expects — most modern APIs use Bearer token format.

// Missing Authorization header entirely
fetch('https://api.example.com/users', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    // No Authorization header — will get 401
  }
})

// Correct: Bearer token in Authorization header
fetch('https://api.example.com/users', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer eyJhbGciOiJSUzI1NiJ9...',
  }
})

// JavaScript fetch
const response = await fetch('https://api.example.com/users', {
  headers: {
    'Authorization': 'Bearer ' + token,
    'Content-Type': 'application/json',
  },
});

// Axios — set globally for all requests
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

// Axios — per-request
const response = await axios.get('https://api.example.com/users', {
  headers: { 'Authorization': 'Bearer ' + token },
});

// cURL
curl -H "Authorization: Bearer eyJhbGc..."      https://api.example.com/users

// Basic Auth (username:password base64 encoded)
curl -H "Authorization: Basic dXNlcjpwYXNz"      https://api.example.com/users
# Or shorthand: curl -u "username:password" https://api.example.com/users

When you send a POST or PUT request with a JSON body, the server needs to know what format the body is in. Without Content-Type: application/json, the server may reject the body entirely, return a 400 or 415 error, or silently misparse the data.

// No Content-Type — server receives body as raw text
fetch('https://api.example.com/users', {
  method: 'POST',
  body: JSON.stringify({ name: 'Alice', email: 'alice@example.com' }),
  // Missing: 'Content-Type': 'application/json'
})

// Correct: Content-Type tells server to parse body as JSON
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token,
  },
  body: JSON.stringify({ name: 'Alice', email: 'alice@example.com' }),
})

Note that Content-Type must match the actual body format. Common values:

# JSON body (most REST APIs)
Content-Type: application/json

# URL-encoded form data (HTML form default)
Content-Type: application/x-www-form-urlencoded

# Multipart form data (file uploads)
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary...

# Plain text
Content-Type: text/plain; charset=utf-8

# XML
Content-Type: application/xml

CORS (Cross-Origin Resource Sharing) errors are some of the most frustrating API failures because they are enforced by the browser — the server may have responded successfully but the browser blocks your JavaScript from reading the response. CORS is a server-side configuration issue. You cannot fix it from the client side.

# Server response missing CORS headers — browser blocks the response
HTTP/2 200
content-type: application/json
# No Access-Control-Allow-Origin — browser refuses to give JS the response

# Server response with correct CORS headers
HTTP/2 200
content-type: application/json
access-control-allow-origin: https://yoursite.com
access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS
access-control-allow-headers: Authorization, Content-Type
access-control-allow-credentials: true

const cors = require('cors');

// Allow all origins (development only — not for production)
app.use(cors());

// Allow specific origin with credentials
app.use(cors({
  origin: 'https://yoursite.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Authorization', 'Content-Type'],
  credentials: true, // Required if sending cookies or Authorization header
}));

// Handle preflight for all routes
app.options('*', cors());

Before debugging why a header is not working, confirm it is actually being sent. Headers can be silently dropped by middleware, proxies, CORS preflight handling, or framework-level configuration.

You added the header in code but it is not appearing in DevTools. Here are the 6 most common reasons a header disappears before reaching the server:

# Nginx proxy stripping the custom header and no Vary header
location /api/ {
  proxy_pass http://backend;
  # Missing: proxy_pass_header Authorization;
  # Missing: add_header Vary Origin;
}

# Correct Nginx config — passes headers through + correct Vary
location /api/ {
  proxy_pass http://backend;
  proxy_pass_header Authorization;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  add_header Vary Origin always;
  add_header Access-Control-Allow-Origin $http_origin always;
  add_header Access-Control-Allow-Credentials true always;
}