Can I use Access-Control-Allow-Origin: * with credentials?

No. When credentials (cookies) are sent, you must specify the exact origin. The wildcard * is not allowed with credentials.

What is a preflight request?

An OPTIONS request sent by the browser before the actual request to check if the server allows the cross-origin request. Triggered by custom headers, non-GET methods, etc.

Browser CORS Error Explained — Cross-Origin Request Blocked

Warningweb development

Overview

Complete guide to CORS (Cross-Origin Resource Sharing) errors: why browsers block cross-origin requests, how to configure CORS headers, and common misconfiguration fixes.

Key Details

CORS is a browser security feature that blocks requests from one origin to a different origin
An origin = protocol + domain + port (e.g., https://example.com:443)
The server must send Access-Control-Allow-Origin header to permit cross-origin requests
Preflight requests (OPTIONS) are sent for non-simple requests to check permissions first
CORS only applies in browsers — server-to-server requests (cURL, Postman) are not affected

Common Causes

Server not sending Access-Control-Allow-Origin header for the requesting origin
Preflight OPTIONS request not handled by the server (returns 404 or 405)
Credentials (cookies) included but Access-Control-Allow-Credentials not set
Access-Control-Allow-Origin set to * but credentials are also requested (not allowed)
Custom headers used but not listed in Access-Control-Allow-Headers

Steps

1Server-side: add Access-Control-Allow-Origin: https://your-frontend.com header
2Handle OPTIONS preflight: respond with 200 and appropriate Access-Control-* headers
3For credentials: set Access-Control-Allow-Credentials: true and specify exact origin (not *)
4List custom headers: Access-Control-Allow-Headers: Content-Type, Authorization
5For development: use a local proxy (Vite proxy, webpack devServer) to avoid CORS entirely