使用AJAX向API传数据时遇Cross-Origin Request Blocked错误求助

核心问题分析 #

你遇到的Cross-Origin Request Blocked错误，核心原因是浏览器预检请求（OPTIONS）未被正确处理。跨域发送POST请求时，浏览器会先发起OPTIONS请求验证服务器是否允许跨域操作，而你的PHP代码仅处理POST请求，且AJAX判断逻辑会直接拦截OPTIONS请求，导致预检失败。

另外还有两个潜在问题：

• HTTP_X_REQUESTED_WITH头不会出现在OPTIONS请求中，直接判断会拒绝预检请求
• 接口完成操作后未返回JSON格式响应，与AJAX设置的dataType: "json"不匹配，会触发后续解析错误

修复方案（修改PHP代码） #

// 优先处理OPTIONS预检请求
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: POST, OPTIONS");
    header("Access-Control-Allow-Headers: Content-Type, X-Requested-With");
    exit();
}

// 处理正常POST请求
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=utf-8"); // 明确返回JSON格式

// 验证AJAX请求
$isAjax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
if (!$isAjax) {
    echo json_encode(['status' => 'error', 'msg' => '非AJAX请求']);
    exit();
}

include_once("UserConfig.php");
$user = new UserFreePlugin();

$user_email = filter_var($_POST['email'] ?? '', FILTER_SANITIZE_EMAIL);
$user_domain = filter_var($_POST['domain'] ?? '', FILTER_SANITIZE_URL);

$response = ['status' => 'success'];
if (!empty($user_email) && !empty($user_domain)) {
    $created_at = date('Y-m-d H:i:s');
    // 假设insertUser返回布尔值表示操作结果
    $insertSuccess = $user->insertUser($user_email, $user_domain, $created_at);
    if (!$insertSuccess) {
        $response = ['status' => 'error', 'msg' => '数据插入失败'];
    }
} else {
    $response = ['status' => 'error', 'msg' => '邮箱或域名不能为空'];
}

// 返回标准JSON响应
echo json_encode($response);
exit();

AJAX代码优化（可选） #

在error回调中添加详细错误打印，方便调试：

var email = $('#my-email').val();
var domain = $('#my-domain').val();
$.ajax({
    type: "POST",
    url: "https://example.com/api/check.php",
    data: { email: email, domain: domain },
    dataType: "json",
    success: function(response) {
        console.log(response);
        if (response.status === 'success') {
            // 执行成功逻辑
        } else {
            alert(response.msg);
        }
    },
    error: function(xhr, status, error) {
        console.log("请求错误:", status, error);
        console.log("响应内容:", xhr.responseText);
    }
});

关键修复点说明 #

1. 处理OPTIONS请求：专门响应浏览器预检请求，返回必要的CORS头后立即退出，确保预检通过
2. 调整AJAX判断逻辑：不再直接跳转，而是返回JSON错误信息，避免跨域场景下的跳转异常
3. 统一返回JSON格式：明确设置Content-Type为application/json，始终返回JSON结构响应，匹配AJAX的dataType设置
4. 完善参数校验：使用$_POST['key'] ?? ''避免未传参时的报错，同时将错误信息反馈给前端

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