經過 Node express服務端程序深刻了解HTTP請求（一）

代碼倉庫：https://github.com/jczzq/cool...

HTTP 知識提要

HTTP（超文本傳輸協議）是一個客戶端（瀏覽器）和服務端（服務器）用於請求和響應的標準。記錄http請求和響應信息的代碼稱爲報文。

HTTP動做

HTTP/1.1協議中共定義了八種方法來操做指定的資源：GET、HEAD、 POST、 PUT、 DELETE、 TRACE、 OPTIONS、 CONNECT。

HTTP報文

HTTP報文由4個部分組成：

• 請求（響應）行（第一行，如下將稱爲起始行）
• 頭字段（第一行以後，明文字符串，以冒號分隔的鍵名與鍵值對，以回車(CR)加換行(LF)符號序列結尾。）
• 空行
• 請求體（可選的HTTP報文主體數據）

HTTP頭字段

HTTP頭字段（HTTP header fields）是指在HTTP的請求和響應消息中的消息頭部分。它們定義了一個超文本傳輸協議事務中的操做參數。HTTP頭字段根據實際用途被分爲如下 4 種類型：

• 通用頭字段(General Header Fields)：同時適用於請求和響應消息，但與最終消息主體中傳輸的數據無關的消息頭。
• 請求頭字段(Request Header Fields)：包含更多有關要獲取的資源或客戶端自己信息的消息頭。
• 響應頭字段(Response Header Fields)：包含有關響應的補充信息，如其位置或服務器自己（名稱和版本等）的消息頭。
• 實體頭字段(Entity Header Fields)：包含有關實體主體的更多信息，好比主體長(Content-Length)度或其MIME類型。

請求方的頭結構：通用報頭 | 請求報頭 | 實體報頭
響應方的頭結構：通用報頭 | 響應報頭 | 實體報頭

須要注意的是請求頭並非按照咱們理解的語義化分類，而是按照 RFC文件標準已經歸類。Accept屬於請求頭， Content-Type屬於實體頭。HTTP頭部字段能夠本身根據須要定義，所以可能在 Web 服務器和瀏覽器上發現非標準的頭字段。，按照慣例，非標準的協議頭字段是在字段名稱前加上 X-前綴來標識。但這一慣例已在2012年6月被廢棄，由於按照這種慣例，非標準字段變成標準字段時會引發不少不方便之處。

準備工做

這是個人測試表單：

<form :action="form.action"
    :method="form.method"
    :enctype="form.enctype">
    <fieldset>
        <legend>
            {{ form.name }} | action="{{ form.action }}" | method="{{ form.method }}" | enctype="{{ form.enctype }}"
        </legend>
        <p>
            <label for="name"> action: </label>
            <input type="text" name="action" v-model="form.action" placeholder="aciton">
        </p>
        <p>
            <label for="name"> name: </label>
            <input type="text" name="name" v-model="form.name" placeholder="name">
        </p>
        <p>
            <label for="method"> method: </label>
            <select name="method" v-model="form.method">
                <option v-for="item in METHODS" :key="item" :value="item">{{item}}</option>
            </select>
        </p>
        <p>
            <label for="enctype"> enctype： </label>
            <select name="enctype" v-model="form.enctype">
                <option v-for="item in ENCTYPES" :key="item" :value="item">{{item}}</option>
            </select>
        </p>
        <p>
            <label for="avatar"> 頭像： </label>
            <input type="file" name="avatar" placeholder="頭像">
        </p>
    </fieldset>
    <p class="p-4 p-r-0 text-right">
        <input type="submit" value="提交">
    </p>
</form>

服務端腳本：

const path = require('path');
const express = require('express');
var app = express();

// 設置靜態文件目錄
app.use(express.static(path.resolve('./static')));
console.info('靜態文件目錄：', path.resolve('./static'));

// 首頁
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, './index.html'));
});

app.use('/user', (req, res, next) => {
    // return res.json({
    //     query: req.query,
    //     params: req.params,
    //     body: req.body
    // });
    return res.sendStatus(200);
});

app.listen(3000, '0.0.0.0', () => {
    console.log('啓動服務器: http://localhost:3000');
});

1. 表單提交時表單內的數據將會被如何處理？

表單提交有三個關鍵的屬性：action,method,enctype。這三個參數分別指定了http請求消息的路徑、動做、消息實體如何編碼。前二者不作贅述，下面仔細說enctype屬性。HTML5 Form的enctype有三個枚舉值：

• application/x-www-form-urlencoded
  Form表單默認編碼方式，method="GET"時表單值內會自動處理成（?name1=value1&name2=value2...）結構的參數並追加到action指定的url以後。
• multipart/form-data
  表單內有文件提交必選的編碼格式。
• text/plain
  表單數據以純文本形式進行編碼。

application/x-www-form-urlencoded

能夠看到表單GET提交的數據默認採起了application/x-www-form-urlencoded編碼。被追加到url後面。服務端默認響應的Content-Type是text/plain純文本。

再來看看錶單POST提交的報文，請求報文頭字段Content-Type明文顯示application/x-www-form-urlencoded，響應報文頭字段Content-Type依然是默認的text/plain純文本。

multipart/form-data

接下來看看第二個multipart/form-data，而且上傳一個圖片23333.jpg。

觀察請求報文，頭字段Content-Type是咱們設定的multipart/form-data，而且制定了一個特定的值boundary，請求實體被編碼變成了一整條消息，裏面的數據由分隔符boundary分割成了多個部分，每個部分的描述不盡相同，其中咱們上傳的文件23333.jpg已經處理成了亂碼。

text/plain

接下來看看第三個text/plain，依然上傳一個圖片23333.jpg。

頭字段Content-Type是咱們設定的text/plain純文本，服務端響應的也是純文本。

參考連接

HTTP頭字段 - Wikipedia
HTTP Headers - MDN
關於HTTP Content-Type說明

若有不足，歡迎指正。