CORS Policy Blocked Request

Add the Access-Control-Allow-Origin header to your server responses.

// Express.js CORS configuration
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "https://yourfrontend.com")
  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(200)
  next()
})

// Or use the cors package
const cors = require("cors")
app.use(cors({ origin: "https://yourfrontend.com" }))

Configure your dev server to proxy API requests to avoid CORS during development.

// Next.js rewrites in next.config.js
module.exports = {
  async rewrites() {
    return [
      { source: "/api/:path*", destination: "https://api.example.com/:path*" },
    ]
  }
}

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

Ensure your server responds to OPTIONS requests with the correct CORS headers.

// Nginx CORS config
location /api/ {
  if ($request_method = OPTIONS) {
    add_header Access-Control-Allow-Origin "https://frontend.com";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "Authorization, Content-Type";
    add_header Access-Control-Max-Age 86400;
    return 204;
  }
}