跨域POST请求触发CORS报错，Access-Control-Allow-Origin缺失如何解决

根因 #

非简单跨域请求的预检请求未被正确处理：当前发送的POST请求属于需预检的非简单请求，浏览器会先发送OPTIONS方法的预检请求验证跨域权限，现有PHP代码没有对预检请求做单独处理，导致预检请求拿不到正确的CORS响应头，直接被浏览器拦截。

修复步骤 #

1. 调整postHere.php代码，新增OPTIONS请求处理 #

修改后的PHP代码如下：

<?php
// 优先处理预检请求
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    switch ($_SERVER['HTTP_ORIGIN']) {
        case 'http://localhost':
        case 'https://localhost':
            header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
            header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
            header('Access-Control-Max-Age: 1000');
            header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
            // 预检请求无需返回业务内容，直接返回204结束请求
            http_response_code(204);
            exit;
    }
}
// 正常业务请求也需要配置跨域头
switch ($_SERVER['HTTP_ORIGIN']) {
    case 'http://localhost':
    case 'https://localhost':
        header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
        header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        header('Access-Control-Max-Age: 1000');
        header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
        break;
}
// 此处添加你原本的业务逻辑，示例为接收JSON参数并返回
$input = json_decode(file_get_contents('php://input'), true);
echo json_encode(['someKey' => 'testValue', 'receivedData' => $input]);

2. 调整前端AJAX配置，匹配JSON参数格式 #

当前传递的是JSON格式字符串，但未声明对应Content-Type，会导致后端无法正确解析参数，修改AJAX代码如下：

$.ajax({
    type: 'POST',
    url: 'http://localhost:81/postHere.php',
    crossDomain: true,
    data: JSON.stringify({"some":"json"}),
    // 新增Content-Type声明，告知后端传递的是JSON格式数据
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(responseData, textStatus, jqXHR) {
        var value = responseData.someKey;
        console.log('请求成功，返回值：', value);
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
        console.log('错误详情：', errorThrown);
    }
});

3. 额外排查点 #

• 确认81端口的Web服务（Apache/Nginx等）没有额外拦截OPTIONS请求，也没有强制添加跨域头覆盖PHP的设置
• 前端页面不要使用file://协议打开，该场景下HTTP_ORIGIN不存在会匹配不到跨域规则，需将前端页面部署在localhost的Web服务下通过http/https访问
• 测试时清除浏览器缓存，避免旧的CORS规则缓存影响验证结果

内容的提问来源于stack exchange，提问作者alexcc