React注册表单提交至PHP后，遇重复用户名无法跳转回页面

问题概述 #

用React开发的用户注册表单，提交数据到insert.php存入MySQL数据库，用户插入功能正常，但检测到重复用户名时，PHP中的header('Location')无法跳转回React页面——直接输入http://localhost:3000/login可正常访问，但PHP端调用该指令完全无效。

核心原因 #

通过axios发起的是AJAX异步请求，而非浏览器直接提交表单。PHP的header('Location')仅对浏览器直接发起的请求生效，对于AJAX请求，浏览器只会将包含Location头的响应返回给axios，不会自动执行跳转，必须由前端手动处理页面跳转逻辑。

修改方案 #

1. 调整PHP代码：返回状态码与提示信息，移除跳转逻辑 #

不再使用header('Location')，改为返回对应HTTP状态码和JSON格式的提示信息，让前端根据响应结果处理：

<?php
require 'connect.php';
header("Access-Control-Allow-Origin: http://localhost:3000");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header('Content-Type: application/json'); // 明确返回JSON格式

// 检测用户名是否可用，使用预处理语句防止SQL注入
function isAvailable($username, $db) {
    $sql = "SELECT username FROM users WHERE username=?" ;
    $stmt = mysqli_prepare($db, $sql);
    mysqli_stmt_bind_param($stmt, "s", $username);
    mysqli_stmt_execute($stmt);
    mysqli_stmt_store_result($stmt);
    return mysqli_stmt_num_rows($stmt) === 0;
}

$postdata = file_get_contents("php://input");
if(isset($postdata) && !empty($postdata)){
    $request = json_decode($postdata);

    $username = $request->username ?? '';
    $password = $request->password ?? '';

    if($username && $password && isAvailable($username, $db)) {
        // 插入数据同样使用预处理语句
        $sql = "INSERT INTO users (username,password) VALUES (?,?)";
        $stmt = mysqli_prepare($db, $sql);
        mysqli_stmt_bind_param($stmt, "ss", $username, $password);
        
        if(mysqli_stmt_execute($stmt)){
            http_response_code(201);
            echo json_encode(['message' => '注册成功']);
        } else {
            http_response_code(422);
            echo json_encode(['message' => '注册失败，请重试']);
        }
    } else { 
        // 用户名重复或字段为空，返回对应错误信息
        http_response_code(400);
        $msg = empty($username) || empty($password) ? '用户名或密码不能为空' : '用户名已存在';
        echo json_encode(['message' => $msg]);
        exit();
    }
}
?>

2. 修改React代码：根据响应状态码处理跳转与提示 #

在axios的回调中，根据PHP返回的状态码和信息，手动控制页面跳转或展示错误提示：

onSubmit(e){
    e.preventDefault();
    if (this.state.password === this.state.passwordConform) {
        const obj = {
            username: this.state.username,
            password: this.state.password,
            passwordConform: this.state.passwordConform,
        };
        axios.post('http://localhost/reactProject/insert.php', obj)
        .then(res => {
            console.log(res.data);
            if(res.status === 201){
                // 注册成功，跳转至登录页
                window.location.href = 'http://localhost:3000/login';
            }
        })
        .catch(error => {
            // 捕获错误，展示提示信息
            const errorMsg = error.response?.data?.message || '请求出错';
            console.log(errorMsg);
            // 可通过更新state在页面上显示错误提示
            // this.setState({ errorMsg: errorMsg });
            
            // 如果需要跳转回登录页，也可在此执行
            // window.location.href = 'http://localhost:3000/login';
        });
    }
}

额外提示 #

• 务必使用预处理语句操作数据库，避免SQL注入风险，这比直接拼接SQL字符串更安全。
• 前端可提前添加表单验证（如用户名长度、密码复杂度），减少无效请求。

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