Browser CORS Error Explained — Cross-Origin Request Blocked

Complete guide to CORS (Cross-Origin Resource Sharing) errors: why browsers block cross-origin requests, how to configure CORS headers, and common misconfiguration fixes. 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: 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. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.

The most common reasons this occurs include: 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. Identifying the root cause is the first step toward finding the right solution.

To resolve this, follow these recommended steps: Server-side: add Access-Control-Allow-Origin: https://your-frontend.com header. Handle OPTIONS preflight: respond with 200 and appropriate Access-Control-* headers. For credentials: set Access-Control-Allow-Credentials: true and specify exact origin (not *). List custom headers: Access-Control-Allow-Headers: Content-Type, Authorization. For development: use a local proxy (Vite proxy, webpack devServer) to avoid CORS entirely. 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.