CORS

// api.php — Enable CORS headers

// Allow a specific origin (recommended over *)
$allowedOrigins = ['https://app.example.com', 'https://www.example.com'];
$origin = $_SERVER['HTTP_ORIGIN'] ?? '';

if (in_array($origin, $allowedOrigins)) {
    header("Access-Control-Allow-Origin: $origin");
} else {
    // Or allow all origins (less secure, fine for public APIs)
    // header('Access-Control-Allow-Origin: *');
}

header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
header('Access-Control-Allow-Credentials: true'); // required for cookies/auth
header('Access-Control-Max-Age: 86400');           // cache preflight for 24 hours

// Handle preflight OPTIONS request
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204); // No Content
    exit;
}

// Continue with normal request handling...
header('Content-Type: application/json');
echo json_encode(['message' => 'CORS-enabled response']);

// npm install cors
const express = require('express');
const cors = require('cors');
const app = express();

// Option 1: Allow all origins (public API)
app.use(cors());

// Option 2: Allow specific origins with full config
app.use(cors({
  origin: ['https://app.example.com', 'https://www.example.com'],
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,   // allow cookies and auth headers
  maxAge: 86400        // cache preflight for 24 hours
}));

// Option 3: Dynamic origin validation
app.use(cors({
  origin: function (origin, callback) {
    const whitelist = ['https://app.example.com'];
    if (!origin || whitelist.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  }
}));

app.get('/api/data', (req, res) => {
  res.json({ message: 'CORS-enabled response' });
});

app.listen(3000);

// ---- PROXY APPROACH (recommended modern solution) ----
// Your own server proxies the request to the third-party API
// Client → Your Server → Third-Party API → Your Server → Client
// No CORS issue because the server-to-server call is not browser-restricted

// Client code (calls your own server)
fetch('/proxy/weather?city=London')
  .then(res => res.json())
  .then(data => console.log(data));

// Your server (proxy.php or Express route) forwards to the real API:
// $response = file_get_contents("https://api.weather.com/v1/city=London&key=SECRET");
// echo $response;

// ---- JSONP (legacy — only GET, avoid in new code) ----
// JSONP works by injecting a <script> tag — not a real AJAX request
// The server wraps the response in a callback function call

function handleWeatherData(data) {
  console.log('Temperature:', data.temp);
}

// Dynamically create a script tag
const script = document.createElement('script');
script.src = 'https://api.example.com/weather?city=London&callback=handleWeatherData';
document.head.appendChild(script);
// Server responds with: handleWeatherData({"temp": 22, "city": "London"})
// The browser executes it as JavaScript, calling our function

// NOTE: JSONP is a security risk and only supports GET.
// Use CORS or a proxy instead.