HTTP 요청과 응답의 multipart/form-data 본문 미리보기

이 짧은 글에서는 multipart/form-data 요청과 응답을 확인하고 미리보는 방법을 소개합니다.

1. multipart/form-data란?

업로드 기능을 개발하고 있다면, Content-Type이 multipart/form-data인 POST 요청을 사용하게 될 가능성이 높습니다.

multipart/form-data는 각 값이 데이터 블록으로 나뉘어 전송되는 특별한 형식의 본문입니다. 각 파트는 정의된 구분자(일명 boundary)로 구분되며, 키 값은 각 파트의 Content-Disposition 헤더에 명시됩니다.

multipart/form-data를 사용하면 다음과 같은 작업을 할 수 있습니다:

서버에 파일 하나 또는 여러 파일을 보낼 수 있습니다.
키-값 쌍을 보낼 수 있습니다.

multipart/form-data를 만드는 방법

Alamofire

Alamofire에는 multipart/form-data 업로드를 도와주는 기본 함수가 있습니다. 아래 코드는 이미지와 파일 이름을 httpbin.org 서버에 업로드하는 방법을 보여줍니다.

let fileName = "image.png"
let imageData = Data() // Data of UIImage
AF.upload(multipartFormData: { multipartFormData in
    multipartFormData.append(Data(fileName.utf8), withName: "fileName")
    multipartFormData.append(imageData, withName: "file")
}, to: "https://httpbin.org/post")
    .responseDecodable(of: HTTPBinResponse.self) { response in
        debugPrint(response)
    }

URLSession

URLSession으로 multipart/form-data를 업로드하는 것은 꽤 까다롭습니다. 아래 코드는 URLSession을 사용해 httpbin.org 서버로 multipart/form-data를 보내는 방법을 보여줍니다.

let fileData: Data = // Data of UIImage
let fileName = "image.png"
let boundary = UUID().uuidString

// Initialize the request
var request = URLRequest(url: URL(string: "https://httpbin.org/post")!)
request.httpMethod = "POST"

// Set multipart/form-data as a Content-Type
// Set boundary
request.setValue("multipart/form-data; boundary=\(boundary)", forHTTPHeaderField: "Content-Type")

// Create a part
let data = NSMutableData()
data.appendString("--\(boundary)\r\n")
data.appendString("Content-Disposition: form-data; name=\"\(fieldName)\"; filename=\"\(fileName)\"\r\n")
data.appendString("Content-Type: \(mimeType)\r\n\r\n")
data.append(fileData)
data.appendString("\r\n")

// Set as a body
request.httpBody = httpBody as Data

// Make a request
URLSession.shared.dataTask(with: request) { data, response, error in
  // Complete
}.resume()

2. Proxyman으로 미리보는 방법은?

다행히 Proxyman은 multipart/form-data 미리보기 기능을 기본으로 지원합니다. 따라서 별도로 설정할 것이 없습니다.

Proxyman은 Content-Type이 multipart/form-data이면 미리보기 탭을 표시합니다.

multipart/form-data의 각 파트를 파일로 내보내기

각 multipart 파트의 데이터를 파일로 내보내서 로컬 컴퓨터에 저장할 수도 있습니다.

iOS 앱에서 업로드하는 내용을 미리 확인하고 잠재적인 버그를 찾아내기에 편리합니다.

업로드가 실패할 때 확인할 항목

먼저 Content-Type 헤더의 boundary가 본문의 구분자와 일치하는지 확인합니다. 그다음 각 필드 이름, 파일 이름, 파트의 Content-Type을 차례로 확인합니다. 서버는 요청을 받아들이더라도 이름이 잘못된 파트는 무시할 수 있습니다. 업로드에는 개인 파일이나 폼 값이 포함되는 경우가 많으므로, 내보낸 파트가 안전하다는 것을 확인한 경우에만 저장하거나 공유합니다.

Proxyman은 개발자가 iOS 기기, iOS 시뮬레이터, Android 기기에서 HTTPS 트래픽을 캡처할 수 있게 해 주는 고성능 macOS 앱입니다.

다운로드 주소: https://proxyman.com

Noah Tran

2021년 6월 24일