Fix CORS Policy Error in PHP & Nginx: The "Access-Control-Allow-Origin" Guide

You built a cool React frontend and a robust PHP backend. It works perfectly on localhost. But the moment you upload it to your server, your application breaks, and the browser console screams red:

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

This is the CORS (Cross-Origin Resource Sharing) mechanism protecting you. Browsers block requests between different domains (or ports) by default to prevent malicious scripts from stealing data. However, for legitimate developers connecting their own Frontend and Backend, it is a headache.

(By the way, if you are setting up a custom domain for your API to avoid this mess, make sure you followed my guide on Pointing Shared Hosting Domains to VPS correctly).

Frontend blocking your API? Learn how to fix Cross-Origin Resource Sharing (CORS) errors by adding headers in PHP or configuring Nginx on aaPanel

The nightmare of every Frontend Developer.

Understanding the "Preflight" Request

Before sending your actual data (POST/PUT), browsers often send a small check-up request called OPTIONS. This is known as the "Preflight".

If your server does not explicitly answer this OPTIONS request with "HTTP 200 OK" and the correct headers, the browser will block the actual request immediately. Many developers forget to handle this specific method.

Method 1: The PHP Header Fix (Easiest)

If you don't have server root access (shared hosting) or just want a quick fix, add these lines at the very top of your PHP API entry point (e.g., index.php or api.php) before any JSON output:

<?php
// Allow from any origin
if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');    // cache for 1 day
}

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");         

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
}
?>

Method 2: The Nginx Config Fix (Best for aaPanel)

If you manage your own server (like on aaPanel), it is better to handle this at the server level so you don't clutter your PHP code.

Adding headers directly in aaPanel Nginx Config.

Open aaPanel > Websites > Click your API Domain > Config.
Add this inside the server { ... } block or location / { ... } block:


location / {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    add_header 'Access-Control-Allow-Origin' '*' always;
}

Restart Nginx via the Service menu, and your API is now open for business!

One Last Tip: The Browser Cache

If you applied the fix but it still doesn't work, clear your browser cache or try Incognito mode. Browsers aggressively cache CORS results, so an old failure might still be haunting you.

Author: Marg | Daily Innovate Tech