主页 / 问题 / 1596572
Accepted
Ольга Кудрявцева
Asked:2024-10-13 17:47:30 +0000 UTC2024-10-13 17:47:30 +0000 UTC

React 不发送授权请求

  • 772

在DRF服务器上，授权API工作正常（我使用jwt）。但是当我尝试从 React 中执行相同操作时，我收到消息 Cannot POST /login。服务器上没有关于post请求的信息，即问题出在前端。

const Login = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');

    const loginUser = async () => {
        try {
            const response = await axios.post('http://127.0.0.1:8000/api/v1/token/', { username, password });
            localStorage.setItem('access', response.data.access);
            localStorage.setItem('refresh', response.data.refresh);
            setError('');
        } catch (err) {
            setError(err.response.data.message);
        }
    };

    return (
        <div>
            <form class="form_auth_style" method="post">
                <div class="form-group">
                    <input class="form-control item" type="text" name="username" placeholder="Логин" required />
                </div>
                <div class="form-group">
                    <input class="form-control item" type="password" name="password" placeholder="Пароль" required />
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-block create-account" type="submit">Вход в аккаунт</button>
                </div>
            </form>
        </div>
    );
};

export default Login;

错误

传输数据

在此输入图像描述

在此输入图像描述

在此输入图像描述

reactjs

1 个回答

  1. Best Answer
    1. /login 请求出现问题

    浏览器有一个默认的表单行为，它尝试将请求发送到指定的地址。

    <form action="/api/login" method="get" class="form-example"></form>

    如果未指定操作，则它会发送不是当前页面的数据，因此您会在路径上看到额外的请求/login。为了防止浏览器出现这种行为，通常会禁用此行为。

    <form onSubmit={(e) => e.preventDefault()}>

    好吧，或者如果数据是通过代码处理的，就不要使用表单标签。

    1. React 中的交互必须明确指定

    现在您已经有了一个干净的布局，并且代码不会以任何方式与其交互。如果这是点击按钮，则必须对其进行处理。

    <button 
    class="btn btn-primary btn-block create-account" 
    onClick={loginUser}>
        Вход в аккаунт
</button>

    字段也是一样，你需要明确指出将数据放在哪里，所以表单数据显示为空。

    <input 
    class="form-control item" 
    type="text" 
    name="username" 
    placeholder="Логин" 
    required 
    value={username} 
    onChange={(e) => setUsername(e.target.value)} />

<input 
    class="form-control item" 
    type="password" 
    name="password" 
    placeholder="Пароль" 
    required 
    value={password} 
    onChange={(e) => setPassword(e.target.value)} />
    • 0

相关问题