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 を使うと、次のことができます：

1 つまたは複数のファイルをサーバーに送信する
キーと値のペアを送信する

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 を使って multipart/form-data を httpbin.org に送信する方法を示します。

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 のプレビュー機能を標準でサポートしています。そのため、何も設定する必要はありません。

Content-Type が multipart/form-data の場合、Proxyman はプレビュー用のタブを表示します。

multipart/form-data の各パートをファイルに書き出す

各 multipart のデータをファイルとしてエクスポートし、ローカルマシンに保存することもできます。

iOS アプリからアップロードした内容をプレビューすると、起こりうるバグを見つけやすくなるので便利です。

アップロードが失敗したときの確認事項

Content-Type ヘッダーのバウンダリが、ボディ内の区切り文字と一致しているか確認してください。次に、各フィールド名、ファイル名、パートの Content-Type を確認します。サーバーはリクエストを受け付けても、名前が誤っているパートを無視することがあります。アップロードには個人のファイルやフォームの値が含まれることが多いため、安全だと確認できた場合にのみ、書き出したパートを保存または共有してください。

Proxyman は、iOS デバイス、iOS シミュレータ、Android デバイスの HTTPS 通信をキャプチャできる、高性能な macOS アプリです。

https://proxyman.com からダウンロードできます。

Noah Tran

2021年6月24日