How to Fix CORS error Error in Web APIs & Browsers

Quick Answer: The CORS error occurs when your browser blocks a cross-origin request because the server did not include the required Access-Control-Allow-Origin header in its response. This happens when JavaScript from one domain tries to access resources from another domain without proper CORS headers. Add the appropriate CORS headers to your server configuration or use a CORS proxy to resolve this issue.

What Causes This Error

Server response missing Access-Control-Allow-Origin header
Browser blocking cross-origin request from different domain
Preflight OPTIONS request not handled by server
Credentials mode mismatch between request and server configuration
Allowed origins list does not include requesting domain
Wildcard CORS configuration disabled in production
Proxy or CDN stripping CORS headers from response

Step-by-Step Fixes

Fix 1: Add Access-Control-Allow-Origin Header to Server

Open your server configuration file (Express, Node.js, Python, etc.),Add CORS middleware or header: res.header("Access-Control-Allow-Origin", "*"),For specific domains, replace "*" with the domain: "https://example.com",Restart your server to apply the changes,Test the request from your browser to confirm the header is present

Fix 2: Configure CORS Middleware in Express

Install cors package: npm install cors,Import cors in your Express app: const cors = require("cors"),Add middleware before routes: app.use(cors()),For specific origins: app.use(cors({ origin: "https://example.com" })),Restart your server and test cross-origin requests

Fix 3: Handle Preflight OPTIONS Requests

Add OPTIONS route handler in your server,Set Access-Control-Allow-Methods header: "GET, POST, PUT, DELETE",Set Access-Control-Allow-Headers header: "Content-Type, Authorization",Return 200 status for OPTIONS requests,Test with curl: curl -X OPTIONS -v https://your-api.com/endpoint

Fix 4: Use CORS Proxy for Third-Party APIs

Use a CORS proxy service like cors-anywhere or your own proxy server,Modify your request URL: https://proxy.example.com/https://api.example.com/data,Ensure the proxy server has proper CORS headers configured,Test the proxied request from your browser,Consider security implications before using public proxies

Fix 5: Configure Credentials and Cookies

Set Access-Control-Allow-Credentials header to true,Set Access-Control-Allow-Origin to specific domain (not "*"),In client code, set credentials: "include" in fetch options,Ensure cookies have SameSite attribute set appropriately,Test with credentials: fetch(url, { credentials: "include" })

Advanced Fixes

Advanced Fix 1: Implement a Reverse Proxy with Nginx

Install Nginx on your server if not already present,Edit your Nginx configuration file (e.g., /etc/nginx/nginx.conf or sites-available/default),Within your server block, add headers: add_header 'Access-Control-Allow-Origin' 'https://your-client-domain.com' always;,Include methods and headers: add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;,Handle preflight requests: if ($request_method = 'OPTIONS') { add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 204; },Reload Nginx configuration: sudo systemctl reload nginx