React+Axios请求丢失Authorization Header，PHP后端返回403问题

问题场景 #

使用React构建前端，通过Axios发送POST请求到PHP后端API，已在Axios中配置Authorization请求头，PHP端也设置了相关授权逻辑，但浏览器实际发送请求时未携带该头，后端返回POST http://localhost/cpp/api/v1/work/createWork.php [HTTP/1.1 403 Forbidden 19ms]错误。

相关代码 #

Tasks.js（前端）

const httpClient = axios.create({baseURL: "http://localhost/cpp/api/v1/"})
const resp = await httpClient.post("/work/createWork.php", {
    body: {
        taskid: id,
        title: data.name,
        content: data.content,
        date: data.date,
        matiere: data.matiere,
        userID: 3
    },
    headers: {
        'Authorization': "XXXXXXXX"
    }
});

createWork.php（后端）

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: OPTIONS, POST");
header("Access-Control-Allow-Header: Content-Type, Authorization");
header("Access-Control-Max-Age: 86400");

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit;
}

include './../main.php';

global $db;

$rq = new APIRequest("POST", true);

header("Content-Type: application/json");

if (!isset($_SERVER['HTTP_Authorization'])) {
    echo "{\"error\": \"This endpoint need auth.\"}";
    http_response_code(403);
    return;
}

错误原因分析 #

1. Axios请求参数格式错误：Axios的post方法参数结构为axios.post(url, data, config)，你将请求体包裹在body字段中，且把headers放在了第二个参数里，导致请求体和请求头配置都未被正确识别。
2. PHP CORS头拼写错误：Access-Control-Allow-Header应为复数形式Access-Control-Allow-Headers，拼写错误会导致浏览器在预检OPTIONS请求后，拒绝携带Authorization头发送实际请求。

修复步骤 #

1. 修正前端Axios请求代码 #

调整参数结构，将请求体直接作为第二个参数，请求头放在第三个配置参数中：

const httpClient = axios.create({baseURL: "http://localhost/cpp/api/v1/"})
const resp = await httpClient.post("/work/createWork.php", 
    {
        taskid: id,
        title: data.name,
        content: data.content,
        date: data.date,
        matiere: data.matiere,
        userID: 3
    },
    {
        headers: {
            'Authorization': "XXXXXXXX"
        }
    }
);

2. 修正后端PHP的CORS头 #

将Access-Control-Allow-Header改为正确的复数形式，同时建议用json_encode生成响应JSON，避免手动拼接出错：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: OPTIONS, POST");
header("Access-Control-Allow-Headers: Content-Type, Authorization"); // 修正为复数Headers
header("Access-Control-Max-Age: 86400");

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit;
}

include './../main.php';

global $db;

$rq = new APIRequest("POST", true);

header("Content-Type: application/json");

if (!isset($_SERVER['HTTP_Authorization'])) {
    echo json_encode(["error" => "This endpoint need auth."]);
    http_response_code(403);
    return;
}

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