POST请求如何构造？

Question

How does a web browser construct a valid HTTP POST request from HTML source code?

For example, the login form on https://stackexchange.com/users/login looks like:

<form method="post" action="/affiliate/form/login/submit">
        <table class="position-table">
            <tbody><tr>
                <td class="input-td">
                    <label for="email" class="accessibility-hidden">Email</label>
                    <input class="framed-text-field edit-field-overlayed" type="text" name="email" id="email" maxlength="100" style="opacity: 0.3; z-index: 1; position: relative;">
                    <span class="form-help" style="display: none;">name@example.com</span>
                </td>
                <td class="input-td">
                    <label for="password" class="accessibility-hidden">Password</label>
                    <input class="framed-text-field edit-field-overlayed" type="password" name="password" id="password" style="opacity: 0.3; z-index: 1; position: relative;">
                    <span class="form-help" style="display: none;">Password</span>
                </td>
                <td></td>
                <td class="input-td">
                    <input type="submit" class="affiliate-button" value="Sign In">
                </td>
            </tr>
        </tbody></table>

        <input type="hidden" name="affId" value="XX">
        <input type="hidden" id="fkey" name="fkey" value="XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX">
    </form>

If I intercept the request my browser sends, I can see the full POST request to be:

POST /affiliate/form/login/submit HTTP/1.1
Host: openid.stackexchange.com
Connection: close
Content-Length: 86
Cache-Control: max-age=0
Origin: https://openid.stackexchange.com
Upgrade-Insecure-Requests: 1
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Referer: https://openid.stackexchange.com/affiliate/form?affId=11&background=transparent&callback=https%3a%2f%2fstackexchange.com%2fusers%2fauthenticate&color=black&nonce=ZUlWWgAAAADlmwCfYbAw%2bg%3d%3d&openid.sreg.requested=email&signupByDefault=false&onLoad=signin-loaded&authCode=E8UrPSRT%2bzAs6b2nqZygJVS2cHb%2fY8TwtrlMUN3bORnP0o7IZRGIatV%2fkJ73KMX0nwrcnJdf2qBKFzJJ28czMo9GWAQesGoO4qgp6XZgulhYzlpEL4XOpTotYAVSlq5K5mFQjwTy6I4YbtJrsIyFs4yy2EgNlOe%2b7E0W%2fRVpnws%3d
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Cookie: prov=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX; acct=XXXXXXXXXXXXXXXvXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX; canary=X; anon=XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX

email=AzureDiamond&password=Hunter2&affId=11&fkey=XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX

How does my web browser (chrome) know to construct the POST request based on what it can see in the form HTML? Certain aspects are obvious, request method, target, content-length, the actual etc is all visible in the form (or entered by the user).

The headers that I don't understand the construction of are:

• Cache-Control
• Upgrade-Insecure-Requests
• Content-Type
• Accept
• Refer
• Accept-Encoding
• Accept-Language

Are these built into/written by the browser? I don't think so because when I try stripping them from the request, I get bad request errors back from stackexchange. However I can't seem to find what the browser builds them from?

Answer 1

The browser assumes that a data requested by a form will not be static, and therefore knows to set "Cache-Control: max-age=0". Similar default assumptions are made by browsers for the other request headers.

However, it is possible to override some defaults with <META tags: enter link description here (which I found linked to under a similar question here at StackOverflow). Others are set as form attributes, like <form accept-charset="ISO-8859-1" ...