ทุกทรัพยากรที่ใช้บนอินเทอร์เน็ตมี Media Type หรือเรียกอีกอย่างว่า MIME Type ย่อมาจาก Multipurpose Internet Mail Extension ข้อมูลนี้จำเป็นสำหรับธุรกรรมระหว่าง Server และ Client
เบราว์เซอร์ต้องรู้ Media Type ของทรัพยากรที่ส่งมา เพื่อจัดการได้อย่างถูกต้อง
Server ต้องการเช่นกัน ต้องรู้ประเภททรัพยากรที่ส่งมา เพื่อ Parse และ Process อย่างถูกต้อง
Content-Type ประกาศที่ไหน?
Media Type ของทรัพยากรใดๆ ประกาศอยู่ใน Property Content-Type ของ Request Header (ฝั่ง Client ตอนส่ง Request ไป Server) หรือใน Response Header (ฝั่ง Server ตอนส่ง Response)
หากไม่ประกาศ Content Type ของทรัพยากรอย่างชัดเจน Client อาจพยายาม Detect ประเภทอัตโนมัติ แต่ผลลัพธ์อาจไม่ถูกต้อง นี่คือเหตุผลว่าทำไมต้องประกาศอย่างชัดเจน
Media Types (ประเภทสื่อ)
Media Types มีอยู่ในรูปแบบต่างๆ แบ่งหมวดหมู่เป็นกลุ่มต่างๆ:
- application
- audio
- font
- example
- image
- message
- model
- multipart
- text
- และ video
หมวดหมู่เหล่านี้ก็มี Types ของตัวเอง เช่น application/json เป็น Type ภายใต้ application และ text/html เป็น Type ภายใต้ text
คุณสามารถหารายการ Media Types ครบถ้วนได้ที่ IANA (องค์กรที่ประสานงานองค์ประกอบสำคัญบนอินเทอร์เน็ต) Media Types
Types ทั้งหมดนี้ครอบคลุมประเภทข้อมูลต่างๆ เช่น ข้อความ เสียง รูปภาพ HTML และอีกมากมายที่ใช้ทั่วอินเทอร์เน็ต
เบราว์เซอร์ต้องรู้ Media Type ของทรัพยากร
เหมือนที่กล่าวไว้ เบราว์เซอร์ต้องรู้ว่าได้รับ Content ประเภทไหน นี่คือตัวอย่างแสดงให้เห็น:
โค้ดต่อไปนี้คือ Node Server ที่ Serve ไฟล์ HTML:
const http = require("http"); const fs = require("fs"); const path = require("path"); const server = http.createServer(function (req, res) { const filePath = path.join(__dirname, "index.html"); var stat = fs.statSync(filePath); res.writeHead(200, { "Content-Type": "text/css", "Content-Length": stat.size, }); const readStream = fs.createReadStream(filePath); readStream.pipe(res); }); server.listen(5000); console.log("Node.js web server at port 5000 is running.."); อย่ากังวลรายละเอียดโค้ด สิ่งที่สนใจคือ ไฟล์ index.html ที่เรา Serve และ Content-Type เป็น text/css
นี่คือเนื้อหาของ index.html:
<h1>Homepage</h1> แน่นอน เอกสาร HTML ต่างจากไฟล์ CSS นี่คือผลลัพธ์บน localhost:5000 เมื่อเริ่ม Server:
คุณยังยืนยัน Response ที่ได้โดยเช็ค Headers ใน Network Tab ของ DevTools
นี่คือผลลัพธ์บน Chrome Browser:
เบราว์เซอร์ได้ Content เป็น CSS Type ดังนั้น มันพยายามจัดการมันเป็น CSS
นอกจากนี้ การรู้ประเภท Content ที่ได้รับอย่างครบถ้วน ยังลดช่องโหว่ด้านความปลอดภัย เพราะเบราว์เซอร์รู้มาตรฐานความปลอดภัยที่ควรปฏิบัติสำหรับข้อมูลนั้น
ตอนนี้คุณเข้าใจ MIME Types และความสำคัญแล้ว มาดู JSON
Content-Type ที่ถูกต้องสำหรับ JSON
JSON ต้องถูกตีความอย่างถูกต้องโดยเบราว์เซอร์ เพื่อใช้งานได้อย่างเหมาะสม text/plain ใช้สำหรับ JSON ทั่วไป แต่ตาม IANA MIME Type อย่างเป็นทางการสำหรับ JSON คือ application/json
นี่หมายความว่า เมื่อคุณส่ง JSON ไป Server หรือรับ JSON จาก Server คุณควรประกาศ Content-Type ของ Header เป็น application/json เสมอ เพราะนี่คือมาตรฐานที่ Client และ Server เข้าใจ
สรุป
เหมือนที่กล่าวไว้ Server (เหมือน Browser) ต้องรู้ประเภทข้อมูลที่ส่งมา เช่นใน POST Request นั่นคือเหตุผลที่ forms ที่มีไฟล์มักมี Attribute enctype ค่า multipart/form-data
ห้ไม่ Encode Request แบบนี้ POST Request จะไม่ทำงาน นอกจากนี้ เมื่อ Server รู้ประเภทข้อมูลที่ได้รับ มันจึงรู้ว่าจะ Parse ข้อมูลที่ Encode แล้วอย่างไร
ในบทความนี้ เราดูว่า MIME Types คืออะไร และวัตถุประสงค์ รวมถึง Content Type อย่างเป็นทางการสำหรับ JSON ผมหวังว่าตอนนี้คุณรู้ว่าทำไมต้องประกาศประเภททรัพยากรเมื่อใช้ข้ามอินเทอร์เน็ต
