React登录页首次Axios请求正常，二次登录请求失效问题

核心问题：登录时无法获取最新的用户名输入值 #

你代码里的var name=nameRef.current.value;是在组件渲染阶段执行的，组件挂载时输入框为空，所以name初始值是undefined。首次登录正常是热重载的特殊场景导致，注销后回到登录页组件重新渲染，name仍保持undefined，使得Axios请求的URL变为http://localhost:8080/api/password/undefined，自然无法获取数据，登录失败。

另外，直接用ref获取输入值并非React推荐的方式，更建议用useState管理表单输入状态，能精准跟踪输入变化。

修复后的代码 #

import { useState, useNavigate } from 'react';
import axios from 'axios';
import { Form, Button } from 'react-bootstrap';

const Login=(props)=>  {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const navigate = useNavigate();

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            // 提交时获取最新的用户名和密码状态
            const res = await axios.get(`http://localhost:8080/api/password/${username}`);
            if (password === res.data.toString()) {
                console.log("正确密码");
                props.login();
                navigate('/');
            } else {
                console.log("密码错误");
            }
        } catch (error) {
            // 捕获请求错误，便于排查问题
            console.error("登录请求失败:", error);
        }
    };

    return (
        <>
            <div className='Registerform'>
                <h3>登录表单</h3><br></br>
                <Form onSubmit={handleSubmit} >
                    <Form.Group className="mb-3" controlId="formBasicName">
                        <Form.Label>用户名</Form.Label>
                        <Form.Control 
                            type="text" 
                            placeholder="输入用户名"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                        />
                    </Form.Group><br></br>

                    <Form.Group className="mb-3" controlId="formBasicPassword">
                        <Form.Label>密码</Form.Label>
                        <Form.Control 
                            type="password" 
                            placeholder="密码"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />
                    </Form.Group><br></br>

                    <Button variant="primary" type="submit">
                        提交
                    </Button>
                </Form>
            </div>
            <Button onClick={props.login} variant="primary">Primary</Button>
        </>
    )
} 

export default Login ; 

关键修改点 #

1. 用useState替代useRef管理用户名和密码的输入状态，每次输入变化都会更新状态，确保提交时拿到最新值。
2. 在handleSubmit中直接使用状态值发起请求，避免了顶层变量无法实时更新的问题。
3. 添加try/catch捕获请求错误，方便排查跨域或后端服务异常。

跨域问题解决（针对useEffect方式出现的No Access Allow Cross Origin错误） #

1. 后端配置CORS：在你的后端服务（如Spring Boot/Node.js）中添加CORS配置，允许前端域名的请求。例如Spring Boot可添加@CrossOrigin注解，Node.js可使用cors中间件。
2. 开发环境代理：在React项目的package.json中添加代理配置，将API请求转发到后端以规避跨域：

"proxy": "http://localhost:8080"

之后请求可写成axios.get("/api/password/"+username)，React会自动将请求转发到后端地址。

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