認識 Content-type

發表於 | 更新於: | 分類於 |

指定檔案類型

當客戶端或是伺服器在互相傳遞資源時，可能會有各種格式的檔案，以文本為例，常見的就包含了 html、css、js(另外還有圖檔..等)，當伺服器在傳輸文本時傳送的都是字串，若沒有設定 Content-type 表頭，瀏覽器是不知道要用什麼檔案格式來解析這些字串的。

一般文本 (.txt)

1
2
3
4
server.on('request', function (request, response) {
  response.setHeader('Content-type', 'text/plain')
  response.end('<h1>Hello World!</h1>')
})

HTML文本

1
2
3
4
server.on('request', function (request, response) {
  response.setHeader('Content-type', 'text/html')
  response.end('<h1>Hello World!</h1>')
})

圖檔 (.jpg)

這裡使用到 Node.js 的 fs 核心模組，記得須要先載入

1
var fs = require('fs')
1
2
3
4
5
6
7
8
9
10
11
12
server.on('request', function (request, response) {
  response.setHeader('Content-type', 'image/jpeg')
  // 讀取同層的 m.jpg 檔案
  fs.readFile('./m.jpg', function (err, data) {
    if (err) {
      console.log('讀取檔案失敗')
      return
    } else {
      response.end(data)
    }
  })
})

檔案類型不勝枚舉，可以到這邊參考檔案類型對應的 Content-type

指定編碼

如果未指定編碼，某些語言的文字輸出在網頁上時會變成亂碼，因為在伺服器發送資料時，預設都是 UTF-8 編碼內容，但瀏覽器並不知道伺服器發送來的內容是 UTF-8 的內容，而當瀏覽器在不知道伺服器回應的內容編碼時，它會按照當前客戶端系統的預設編碼來解析(中文預設編碼是 GBK 編碼)，進而產生亂碼，因此當你在發送數據時必須告訴瀏覽器你的編碼是哪一種。

UTF-8 萬國碼：簡單來說 UTF-8 可以辨識解析世界上大部分的語言，因次被廣泛使用

1
2
3
server.on('request', function (request, response) {
  response.end('你好世界!')
})

使用 Content-type 定義編碼

1
2
3
4
server.on('request', function (request, response) {
  response.setHeader('Content-type', 'text/plain; charset=utf-8')
  response.end('你好世界!')
})

現在顯示正常了! 可以開啟開發人員工具 Network 觀察這次響應的詳細資料

另外除了可以透過 Content-type 來指令編碼，也可以在 HTML 頁面中透過 meta 標籤來聲明當前文本的編碼格式，瀏覽器也可以識別。

1
2
3
<head>
  <meta charset="utf-8">
</head>