对接谷歌登录时PHP接收XHR POST请求后header跳转失效是什么原因？

问题原因 #

你通过XMLHttpRequest发送异步POST请求时，服务端返回的Location响应头只会作用于该XHR请求本身，不会触发浏览器当前顶层页面跳转。你的后端逻辑实际已经执行成功，会话变量也正常设置，只是跳转动作没有生效在用户正在访问的页面上。

修复步骤 #

1. 调整后端includes/oauth.php逻辑 #

删除原有header跳转代码，改为返回JSON格式的登录结果：

<?php
session_start();
// 原有校验逻辑保持不变
if (isset($_POST['idtoken'])){
    // 原有令牌校验、数据库查询、SESSION设置逻辑保持不变
    $_SESSION["auth"] = true;
    $_SESSION["userId"] = $row['id'];
    $_SESSION["userName"] = $row['name'];
    
    // 替换原有header跳转代码
    echo json_encode(['status' => 'success']);
    exit();
}

2. 调整前端includes/oauth.js逻辑 #

给XHR添加请求完成监听，拿到登录成功结果后由前端控制页面跳转：

// 原有XHR初始化逻辑保持不变
var xhr = new XMLHttpRequest();
xhr.open('POST', 'includes/oauth.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// 新增请求完成回调逻辑
xhr.onload = function () {
    if (xhr.status === 200) {
        const result = JSON.parse(xhr.responseText);
        if (result.status === 'success') {
            // 前端触发页面跳转到首页
            window.location.href = '../index.php';
        }
    }
};

xhr.send('idtoken=' + id_token);
// 原有其他逻辑保持不变

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