Understanding Cross-Origin Requests and PHP Solutions for CORS

Cross‑origin (CORS) refers to a request from one domain to resources on another domain, which browsers block for security due to the same‑origin policy that requires the same protocol, host, and port.

The same‑origin policy protects against XSS and CSRF attacks and limits access to cookies, local storage, IndexedDB, DOM nodes, and AJAX responses.

Three HTML tags are allowed to load cross‑origin resources: <img src=...> , <link href=...> , and <script src=...> .

Any difference in protocol, sub‑domain, main domain, or port constitutes a different origin, and while the request reaches the server, the browser intercepts the response.

PHP can solve CORS by sending appropriate headers. A simple allow‑all example is:

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST");
header("Access-Control-Allow-Headers:x-requested-with, content-type");

More restrictive options include allowing a single domain:

header('Access-Control-Allow-Origin:http://www.startphp.cn');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with, content-type');

Or allowing multiple specific domains via a static array and a helper method:

static public $originarr = [
    'https://test1.com',
    'https://test2.com',
];
static public function setheader(){
    $origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
    if (in_array($origin, self::$originarr)) {
        header('Access-Control-Allow-Origin:' . $origin);
        header('Access-Control-Allow-Methods:POST,GET');
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Allow-Headers:x-requested-with,Content-Type,X-CSRF-Token');
    }
}

A proxy approach can bypass the browser restriction by having the front‑end call a same‑origin server endpoint that forwards the request to the target domain and returns the response.

Using Nginx reverse proxy is another simple solution; the configuration below creates a proxy server that forwards traffic to the target domain and can rewrite cookies:

// proxy server
server {
    listen 81;
    server_name www.domain1.com;
    location / {
        proxy_pass http://www.domain2.com:8080;
        proxy_cookie_domain www.domain2.com www.domain1.com;
        add_header Access-Control-Allow-Origin http://www.domain1.com;
        add_header Access-Control-Allow-Credentials true;
    }
}

On the client side, an XMLHttpRequest can be sent to the Nginx proxy with credentials enabled:

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();

These techniques together provide a comprehensive guide to understanding and handling cross‑origin issues in web development.