Browser CORS Credentials Include Error — What It Means & How to Fix It
About Browser CORS Credentials Include Error
Fix CORS error when using credentials: 'include' with fetch or XMLHttpRequest and the server does not properly handle credentialed requests. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.
Here are the key things to understand: When fetch uses credentials: 'include', the server must respond with specific CORS headers. Access-Control-Allow-Origin cannot be a wildcard (*) for credentialed requests — it must echo the exact origin. Access-Control-Allow-Credentials: true must be present in the response. This is a common error when developers add credentials to an API that previously worked without them. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.
The most common reasons this occurs include: Server responds with Access-Control-Allow-Origin: * instead of the specific requesting origin. Server missing the Access-Control-Allow-Credentials: true header. Preflight OPTIONS request not handled correctly for credentialed requests. CDN or reverse proxy stripping or overwriting CORS headers. Identifying the root cause is the first step toward finding the right solution.
To resolve this, follow these recommended steps: Update the server to echo the request's Origin header: res.setHeader('Access-Control-Allow-Origin', req.headers.origin). Add the credentials header: res.setHeader('Access-Control-Allow-Credentials', 'true'). Handle the OPTIONS preflight with the same headers and a 204 No Content response. If using a CDN, configure it to pass through CORS headers from the origin server. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.
This article is part of our Browser Errors collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.
Quick Answer
Why can't I use * with credentials?
This is a security measure. If wildcard origins were allowed with credentials, any website could make authenticated requests to your API using the user's cookies. Requiring a specific origin prevents this cross-site attack.
Overview
Fix CORS error when using credentials: 'include' with fetch or XMLHttpRequest and the server does not properly handle credentialed requests.
Key Details
- When fetch uses credentials: 'include', the server must respond with specific CORS headers
- Access-Control-Allow-Origin cannot be a wildcard (*) for credentialed requests — it must echo the exact origin
- Access-Control-Allow-Credentials: true must be present in the response
- This is a common error when developers add credentials to an API that previously worked without them
Common Causes
- Server responds with Access-Control-Allow-Origin: * instead of the specific requesting origin
- Server missing the Access-Control-Allow-Credentials: true header
- Preflight OPTIONS request not handled correctly for credentialed requests
- CDN or reverse proxy stripping or overwriting CORS headers
Steps
- 1Update the server to echo the request's Origin header: res.setHeader('Access-Control-Allow-Origin', req.headers.origin)
- 2Add the credentials header: res.setHeader('Access-Control-Allow-Credentials', 'true')
- 3Handle the OPTIONS preflight with the same headers and a 204 No Content response
- 4If using a CDN, configure it to pass through CORS headers from the origin server