Browser CORS error when sending cookies: fetch with credentials 'include' fails with 'The value of the Access-Control-Allow-Origin header must not be the wildcard' or 'Credential is not supported if the CORS header Access-Control-Allow-Origin is *'. How do I fix it?

Cause: by default a cross-origin fetch() or XMLHttpRequest sends no cookies. Once you opt in with credentials: "include" (fetch) or withCredentials = true (XHR), the browser applies stricter rules to the response. The server must send Access-Control-Allow-Credentials: true, and it must not answer with * for Access-Control-Allow-Origin (or for Allow-Headers, Allow-Methods and Expose-Headers). If either rule is broken, the browser blocks the response from your page and reports a CORS error, and any Set-Cookie in that response is ignored. A preflight request never carries credentials itself, but its response also has to include Access-Control-Allow-Credentials: true, otherwise the real request fails. Fix: 1. Client: fetch("https://api.example.com/data", { credentials: "include" }) (XHR: xhr.withCredentials = true). Only add this when you really need cookies or HTTP auth. 2. Server: return the exact requesting origin from an allow-list, for example Access-Control-Allow-Origin: https://app.example.com, plus Access-Control-Allow-Credentials: true. Never reflect arbitrary Origin values; compare against a fixed list. 3. Add Vary: Origin whenever you return a specific origin, so shared caches do not serve one origin's answer to another. 4. For preflighted requests (custom headers, JSON content type, PUT/DELETE), answer the OPTIONS request with the same Allow-Origin and Allow-Credentials headers, and list explicit values in Access-Control-Allow-Headers and Access-Control-Allow-Methods instead of *. 5. Cookies also need to be allowed by their own attributes: if the API is on a different site, the cookie normally needs SameSite=None; Secure, and browser third-party cookie settings can still block it. 6. Check that a proxy or CDN in front is not stripping or overwriting these headers. Don't: answer with * and credentials together, or echo any Origin back without checking it. That lets any website make authenticated requests as your logged-in users. Verify: in the browser's Network tab, the preflight (if any) and the real response both show the specific Allow-Origin and Allow-Credentials: true, the cookie is attached to the request, and no CORS error appears in the console. Sources: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Access-Control-Allow-Credentials