javascript - fetch 不发送自动填充的输入

Question

当我的浏览器(chrome)预填充我的登录凭据时，我的 fetch 函数不会发送值
html

 <div class='login-frame'>
    <h3>Bienvenue</h3>
    <div class='form'>
        <div class='input-handler'>
            <label for='login'>Login</label>
            <input type='text' id='login' name='login' autocomplete='on'>
        </div>
        <br>
        <div class='input-handler'>
            <label for='pass'>Mot-de-passe</label>
            <input type='password' id='pass' name='pass' autocomplete='on'>
        </div>
        <br>
        <button id='loginbutton'>CONNEXION</button>
    </div>
</div>

JS

window.onload = function() {
var pass = document.getElementById('pass'),
    login = document.getElementById('login'),
    loginButton = document.getElementById('loginbutton');

loginbutton.onclick = (e)=> {
    var creds = {
        login: login.value,
        pass: pass.value
    }
    
    fetch('functions/log.php', {
        method: "POST",
        header: {"Content-type": "application/json; charset=UTF-8"},
        body: JSON.stringify(creds)
    });
}

PHP

$pos = json_decode(file_get_contents('php://input', true));
echo var_dump($pos);

如果我输入任何内容，它会返回

object(stdClass)#3 (2) {
["login"]=>

string(3) "qfz"

["pass"]=>

string(5) "zfqzf"

}

如果我使用浏览器预填充，它会返回

NULL

Answer 1

那是一个错误，
正如@CBroe 所说，这是一个安全问题。将我的 html 更改为适当的形式使其可以正常工作

<form class='login-frame' method='post' action='#'>
    <div class='login-logo'><img src='bs/img/logo_b.svg'></div>
    <h3>Bienvenue</h3>
    <div class='form'>
        <div class='input-handler'>
            <label for='login'>Login</label>
            <input type='text' id='login' name='login' autocomplete='on'>
        </div>
        <br>
        <div class='input-handler'>
            <label for='pass'>Mot-de-passe</label>
            <input type='password' id='pass' name='pass' autocomplete='on'>
        </div>
        <br>
        <button type='submit' id='loginbutton'>CONNEXION</button>
    </div>
</form>