fetch 不發送自動填充的輸入

Question

當我的瀏覽器（chrome）預填充我的登錄憑據時，我的 fetch function 不會發送值

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);

如果我輸入任何內容，它會返回

對象（stdClass）#3（2）{
[“登錄”]=>

字符串（3）“qfz”

[“通過”]=>

字符串（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>