How to Fix CORS Errors in JavaScript

How to Fix CORS Errors in JavaScript

Common CORS Error

Access to fetch at 'https://api.example.com/data' from origin 'https://myapp.com'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
is present on the requested resource.

Fix 1: Configure Server Headers

Add CORS headers to the server response:

Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

Fix 2: Express.js (Node.js)

const cors = require("cors");
app.use(cors({ origin: "https://myapp.com", credentials: true }));

Fix 3: Manual Headers

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  if (req.method === "OPTIONS") return res.sendStatus(204);
  next();
});

Fix 4: Development Proxy

Use a proxy in development (Vite, webpack, Next.js):

// vite.config.js
export default {
  server: { proxy: { "/api": "https://api.example.com" } }
};

Fix 5: Do Not Use * with Credentials

Access-Control-Allow-Origin: * does not work with credentials: true. Specify the exact origin instead.

The Takeaway

Fix CORS: configure server headers (Access-Control-Allow-Origin, Methods, Headers), use the cors middleware in Express, handle OPTIONS preflight (return 204), use a proxy in development, and do not use * with credentials.