CORS Troubleshooter

Diagnoses and resolves Cross-Origin Resource Sharing (CORS) errors that block API calls, font loading, and resource access between different origins. Covers preflight request failures, Access-Control-Allow-Origin configuration, credential handling, custom header exposure, wildcard restrictions, proxy solutions, and server-specific configuration for Express, Nginx, Apache, and cloud services.

Usage

Describe the CORS error you are seeing, including the browser console error message, the requesting origin, the target URL, and your server technology. Specify whether you are using cookies/credentials and any custom headers. The skill diagnoses the specific CORS violation and provides the exact server configuration fix.

Examples

• "Fix: Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked"
• "My preflight OPTIONS request returns 405 — how do I configure my Express API to handle it?"
• "CORS works for GET but fails on POST with Content-Type: application/json — what's wrong?"
• "How do I configure Nginx to add CORS headers for a font CDN serving to multiple domains?"

Guidelines

• Access-Control-Allow-Origin must match the exact requesting origin or be * (wildcard) — no patterns
• Wildcard (*) cannot be used with credentials (cookies, auth headers); must echo the specific origin
• Preflight (OPTIONS) triggers on non-simple requests: custom headers, PUT/DELETE, or application/json
• The server must respond to OPTIONS with 200/204 and the Access-Control-Allow-* headers, not 405
• Access-Control-Allow-Headers must list every custom header the client sends (Authorization, Content-Type)
• Access-Control-Expose-Headers is needed for the client to read non-simple response headers
• Set Access-Control-Max-Age to cache preflight responses and reduce OPTIONS request overhead
• When CORS can't be fixed server-side, use a same-origin reverse proxy to avoid cross-origin requests entirely