-
http multipart requestNetwork 2023. 3. 11. 23:03728x90반응형
개요
http 통신은 두 서비스가 정보를 교환하는 방식입니다.
정보를 교환하는 방식은 다른 표현으로 프로토콜이라고 합니다.
그리고 이 서비스들은 각각 클라이언트와 서버로 불리는데요.
클라이언트는 어떠한 컨텐츠에 대한 직접적인 요구를 하는 서비스이고, 서버는 그 요청을 수행해줍니다.
즉, http 통신은 클라이언트와 서버가 서로 정보를 교환하고 처리하기 위한 프로토콜이라고 할 수 있습니다.
브라우저의 네트워크 도구를 통해서 이미지와 문서 등의 자원들이 통신되는 것을 확인할 수 있습니다.
http 통신은 이미지, 문서, 스크립트, 파일 등의 다양한 타입의 데이터를 교환할 수 있습니다.
multipart 방식의 http 통신은 큰 규모의 파일을 효율적으로 처리하거나 다양한 데이터 타입의 데이터를 통신하기 위해서 주로 사용하곤 합니다.multipart
HTTP는 오랜 기간동안 사용되고 발전되어 오면서 다양한 데이터 타입을 수용할 수 있게 되었습니다.
과거의 HTTP는 단순히 이미지와 문서만이 통신 가능했습니다.
하지만 시간이 흘러 스크립트와 json 그리고 바이너리 데이터 또한 통신이 가능해졌습니다.
Content-Type 을 지정함으로써 손쉽게 다양한 데이터를 다룰 수 있습니다.
하지만 HTTP Request 는 구조적으로 단 하나의 메시지만을 표현할 수 있습니다.
HTTP 메시지의 구조는 아래와 같이 표현됩니다.
POST / HTTP 1.1 Host : localhost:3000 User-Agent : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Accept-Encoding: gzip, deflate Content-Type: multipart/form-data; binary=4j3jdi3jt -4j3jdi3jt .. data ..1. Start-Line
POST / HTTP 1.12. Request/Response Header
Host : localhost:3000 User-Agent : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Accept-Encoding: gzip, deflate Content-Type: multipart/form-data; binary=4j3jdi3jt3. Blank Line
// 빈 한줄의 라인4. Request/Response Message
-4j3jdi3jt .. data ..로 구성되는데요, Request/Response Message 이 실질적인 데이터를 포함하는 구성요소입니다.
Content-Type를 설정함으로써 Request/Response Message 의 타입을 지정할 수 있는데,
둘 이상의 타입의 데이터를 통신하고 싶을 때는 제약 사항이 될 수 있습니다.
이렇게 다양한 타입의 데이터를 활용하기 위해서 나온 Content-Type 이 바로 multipart 입니다.
multipart 타입을 사용함으로써, 스크립트, 이미지, 문자열, 바이너리 데이터 등을 동시에 전송할 수 있게 되었습니다.
이때 다양한 데이터들이 Request Message Body 에 추가되게 되는데,
각각의 데이터를 구분하기 위해서 boundary 라는 방식을 사용합니다.
boundary 는 단순합니다. 식별할 수 있는 고유한 값을 활용하여 데이터를 나누어 줍니다.
예를 들면, 아래와 같습니다.
// .. // Http Header Content-Type : multipart/form-data; boundary=----1q2w3e4r ----1q2w3e4r Content-Disposition: form-data; name="file"; filename="test1.txt" Content-Type: plain/text this is first file content. ----1q2w3e4r Content-Disposition: form-data; name="picture"; filename="picture.jpeg" Content-Type: image/jpeg image binary data ----1q2w3e4rContent-Type 은 multipart/form-data 와 boundary 에 해당하는 난수가 주어집니다.
그리고 첨부된 여러 데이터들은 http message body 에서 boundary 로 구분되어 컨텐츠의 내용이 구성됩니다.
예시
클라이언트 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/test2" method="post" enctype="multipart/form-data"> <p><input type="text" name="text" value="this is text"> <p><input type="file" name="file"> <p><input type="file" name="image"> <p><button type="submit">Submit</button> </form> </body> </html>서버 코드 (nodejs)
const express = require('express') const bodyParser = require('body-parser') const multer = require('multer'); const app = express() const port = 3000; app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.use(multer({dest:__dirname+'/uploads/'}).any()); app.post('/upload', (req, res) => { console.log(req.body) console.log(req.files) res.send("hi") }) app.listen(port)
반응형'Network' 카테고리의 다른 글
TCP Socket 알아보기 (0) 2022.12.19