CORS Error | WebDesign001

What Is CORS?

CORS is a browser security feature that blocks JavaScript on one origin (domain + port + protocol) from making requests to a different origin, unless the target server explicitly allows it.

// This works — same origin
fetch('/api/data');  // your page is on webdesign001.net, API is on webdesign001.net

// This gets CORS-blocked — different origin
fetch('https://api.other-site.com/data');  // blocked by browser

💡 Important: CORS is enforced by the browser, not the server. The request still reaches the server — the browser just blocks your JavaScript from reading the response. Server-to-server requests have no CORS restriction.

Reading the Error Message

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

Fix: Add CORS Headers on the Server

The correct fix is always server-side — add the right response headers:

# Apache .htaccess
Header set Access-Control-Allow-Origin "https://webdesign001.net"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

# Allow any origin (open API)
Header set Access-Control-Allow-Origin "*"

# PHP
header('Access-Control-Allow-Origin: https://webdesign001.net');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
  exit(0);  // Handle preflight
}

// Node.js / Express
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://webdesign001.net');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  if (req.method === 'OPTIONS') return res.sendStatus(200);
  next();
});

Fix: Development Workarounds

// Vite dev server proxy (vite.config.js)
export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://api.other-site.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}

Credentials & Cookies

// To send cookies cross-origin, need credentials: 'include'
fetch('https://api.example.com/data', {
  credentials: 'include'
});

// Server must also respond with:
// Access-Control-Allow-Credentials: true
// AND Access-Control-Allow-Origin must be a specific origin (not *)

← PreviousCannot read properties of null Next →ReferenceError: x is not defined

🌐 CORS Error