PHP添加HTTP响应码后Axios跨域报错的解决求助

问题根源 #

浏览器发送POST请求前会自动发起OPTIONS预请求，用于验证跨域权限。你的PHP接口未单独处理OPTIONS请求，直接返回了400状态码，导致预请求未通过CORS检查，进而拦截了后续的实际POST请求。而Postman不会发送预请求，所以能正常调用接口。

解决方案 #

1. 优先处理OPTIONS预请求 #

在接口开头判断请求方法，若为OPTIONS则直接返回200状态码和完整CORS头，确保预请求通过。

2. 所有响应都携带CORS头 #

不管是成功还是错误响应，都要设置正确的跨域允许头，避免被浏览器拦截。

3. 仅在业务逻辑中返回自定义响应码 #

确保自定义响应码只在实际POST请求的业务判断中返回，不影响预请求。

修改后的login.php示例代码 #

<?php
// 先处理OPTIONS预请求，确保跨域验证通过
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header('Access-Control-Allow-Origin: http://localhost:3000');
    header('Access-Control-Allow-Methods: POST, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type');
    http_response_code(200);
    exit;
}

// 为POST请求设置CORS头和响应格式
header('Access-Control-Allow-Origin: http://localhost:3000');
header('Content-Type: application/json');

// 登录业务逻辑
try {
    $email = $_POST['email'] ?? '';
    $password = $_POST['password'] ?? '';

    if ($email === '合法邮箱' && $password === '正确密码') {
        http_response_code(200);
        echo json_encode(['status' => 'success', 'user' => ['id' => 1, 'email' => $email]]);
    } else {
        http_response_code(400);
        echo json_encode(['status' => 'error', 'message' => '邮箱或密码错误']);
    }
} catch (Exception $e) {
    http_response_code(500);
    echo json_encode(['status' => 'error', 'message' => $e->getMessage()]);
}
?>

Axios请求代码无需调整 #

你的前端请求逻辑没有问题，故障完全源于后端对预请求的处理缺失。

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