How to enable CORS

Cross-Origin Resource Sharing (CORS) is a browser security mechanism based on HTTP headers. It decides whether a web page loaded from one origin (for example https://academy.webotapp.com) may read responses from an API on a different origin (for example https://api.webotapp.com). The same rule applies when a mobile app's web view or a separate website calls your PHP or Node.js API.

1. The core CORS headers

• Access-Control-Allow-Origin: the one external origin allowed to read the response.
• Access-Control-Allow-Methods: the HTTP methods allowed, such as GET, POST, PUT, DELETE, OPTIONS.
• Access-Control-Allow-Headers: the request headers the client may send, such as Content-Type, Authorization, X-Requested-With.

2. Two rules for credentials and caching

Never combine a wildcard with credentials. If your app sends cookies or an Authorization header and the response includes Access-Control-Allow-Credentials: true, the browser rejects Access-Control-Allow-Origin: *. Check the caller's origin against a server-side whitelist and echo back that exact origin.

Send Vary: Origin whenever the origin is chosen dynamically. It tells proxies and caches that the response differs by origin, so a response meant for one site is never served to another.

3. Preflight OPTIONS requests

When a request uses a method such as PUT or DELETE, or headers such as Authorization or Content-Type: application/json, the browser first sends an OPTIONS request to ask permission. Your server should answer it straight away with the CORS headers and a 204 No Content, without running any database queries.

4. PHP example

<?php
// cors.php - include this at the top of every API file
$allowedOrigins = [
    'https://academy.webotapp.com',
    'https://webotapp.com',
];
$origin = $_SERVER['HTTP_ORIGIN'] ?? '';

if (in_array($origin, $allowedOrigins, true)) {
    header("Access-Control-Allow-Origin: $origin");
    header("Vary: Origin");
    header("Access-Control-Allow-Credentials: true");
}
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");
header("Access-Control-Max-Age: 86400");

// Answer the preflight request and stop
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit;
}

header("Content-Type: application/json");
echo json_encode(["status" => "success"]);

5. Node.js and Express example

const express = require('express');
const app = express();

const allowedOrigins = [
  'https://academy.webotapp.com',
  'https://webotapp.com',
];

app.use((req, res, next) => {
  const origin = req.headers.origin;

  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
    res.setHeader('Vary', 'Origin');
    res.setHeader('Access-Control-Allow-Credentials', 'true');
  }
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
  res.setHeader('Access-Control-Max-Age', '86400');

  if (req.method === 'OPTIONS') {
    return res.sendStatus(204);
  }
  next();
});

app.get('/api/resource', (req, res) => {
  res.json({ message: 'CORS configured' });
});

app.listen(4000);

6. Allowing every origin (public APIs only)

If the API is public and uses no cookies or tokens, header("Access-Control-Allow-Origin: *"); is acceptable. Never use it for an API that identifies the user.