如何在Apache部署的React应用中实现带授权的服务器端重定向

原测试代码 #

redirect.php #

<?php
    header('Access-Control-Allow-Origin: *');
    $url = "/";
    header("Location: $url");
    exit;
?>

index.html #

<form id="redirectForm" action="https://.../redirect.php">
    <button type="submit">Submit</button>
</form>

需求 #

• Authorization Header：请求必须携带授权头
• POST Method：请求需使用POST方法
• 无可见表单：隐藏表单无法处理授权头，因此不适用
• 避免客户端手动跳转（如处理302响应），保障支付场景的安全性

现有React实现代码 #

const apiUrl = "https://.../serverRedirect.php";

const paymentRedirect = ({ token, body }) => {
    fetch(apiUrl, {
        body: JSON.stringify(body),
        headers: {
            // 尝试过前后端都使用"application/json"
            "Content-Type": "application/x-www-form-urlencoded", 
            Authorization: `Bearer ${token}`,
        },
        method: "POST",
    });
};

export default paymentRedirect;

解决方案 #

核心思路 #

AJAX请求（如fetch）会自动跟随302重定向，但不会触发浏览器页面导航，因此无法直接实现跳转。正确的做法是：

1. React前端通过fetch发送带Auth头的POST请求到自有PHP后端
2. PHP后端验证Auth头合法性，生成支付网关所需的安全参数
3. 后端返回一个自动提交的隐藏表单HTML，前端将其插入DOM，由浏览器自动完成跳转（此方式既满足无可见表单要求，又保证参数安全性）

代码实现 #

1. 修改PHP后端（serverRedirect.php）

<?php
// 验证Authorization头
$authHeader = isset($_SERVER['HTTP_AUTHORIZATION']) ? $_SERVER['HTTP_AUTHORIZATION'] : '';
if (!$authHeader || strpos($authHeader, 'Bearer ') === false) {
    http_response_code(401);
    echo "Unauthorized";
    exit;
}

$token = substr($authHeader, 7);
// 此处添加你的Token验证逻辑（如与Auth服务/数据库校验）
// if (!validateToken($token)) { http_response_code(403); exit; }

// 解析前端发送的请求体
$requestBody = json_decode(file_get_contents('php://input'), true);
// 生成支付网关所需的参数（含后端签名，防止篡改）
$paymentParams = [
    'order_id' => $requestBody['orderId'],
    'amount' => $requestBody['amount'],
    'signature' => generatePaymentSignature($requestBody), // 替换为你的签名生成逻辑
    // 其他支付网关要求的参数
];

// 生成自动提交的隐藏表单HTML
$paymentGatewayUrl = "https://your-payment-gateway.com/pay";
$formHtml = <<<HTML
<!DOCTYPE html>
<html>
<head>
    <title>Redirecting to Payment Gateway...</title>
    <script>
        window.onload = () => document.getElementById('paymentForm').submit();
    </script>
</head>
<body>
    <form id="paymentForm" action="$paymentGatewayUrl" method="POST" style="display: none;">
        <?php foreach ($paymentParams as $key => $value): ?>
            <input type="hidden" name="$key" value="{$value}">
        <?php endforeach; ?>
    </form>
    <p>Redirecting to payment gateway, please wait...</p>
</body>
</html>
HTML;

// 返回HTML响应
header('Content-Type: text/html');
echo $formHtml;
exit;
?>

2. 修改React前端代码

const apiUrl = "https://.../serverRedirect.php";

const paymentRedirect = ({ token, body }) => {
    fetch(apiUrl, {
        body: JSON.stringify(body),
        headers: {
            "Content-Type": "application/json", 
            Authorization: `Bearer ${token}`,
        },
        method: "POST",
    })
    .then(response => {
        if (!response.ok) throw new Error('Redirect request failed');
        return response.text();
    })
    .then(html => {
        // 将后端返回的HTML插入DOM，触发自动提交
        const tempContainer = document.createElement('div');
        tempContainer.innerHTML = html;
        document.body.appendChild(tempContainer);
    })
    .catch(error => {
        console.error('Payment redirect error:', error);
        alert('Failed to connect to payment gateway. Please try again later.');
    });
};

export default paymentRedirect;

方案优势 #

• 满足Auth头要求：前端仅向自有后端发送Auth头，后端验证后才生成支付请求，避免敏感信息暴露给第三方
• POST方法合规：最终通过POST表单提交到支付网关，符合支付场景要求
• 无可见表单：表单隐藏且自动提交，用户无感知
• 高安全性：支付参数由后端生成并签名，前端无法篡改，避免客户端跳转的安全风险

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