iOS模拟器向本地Vapor POST图片遇413请求体过大问题排查

• Vapor (v4.77+)
• macOS v13.4.1

尝试向本地服务器 http://localhost:8080/upload 发送POST请求，上传一张466KB的image/png格式图片，同时运行Xcode iOS模拟器。

Initial Payload: PayloadModel(filename: "ToiletOnTheSea", contentType: "image/png", data: 466220 bytes)
Status Code: 413

struct PayloadModel: Codable {
    let filename: String
    let contentType: String
    let data: Data

    enum CodingKeys: String, CodingKey {
        case filename
        case contentType
        case data
    }
}

func uploadImageToServer() async {
        let sampleImage = "ToiletOnTheSea"

        guard let image = UIImage(named: sampleImage), let imageData = image.pngData() else {
            showAlert("No Image", "I couldn't access \(sampleImage)")
            print("Error converting image to data")
            return
        }

        let payload = PayloadModel(filename: sampleImage, contentType: "image/png", data: imageData)

        var request = URLRequest(url: serverURL)
        request.httpMethod = "POST"
        request.setValue("application/json", forHTTPHeaderField: "Content-Type")

        print("Initial Payload: ", payload)

        do {
            let jsonData = try JSONEncoder().encode(payload)
            request.httpBody = jsonData

            let (data, response) = try await URLSession.shared.data(for: request)

            if let httpResponse = response as? HTTPURLResponse {
                print("Status Code: \(httpResponse.statusCode)")

                if let serverData = try? JSONDecoder().decode(ServerResponse.self, from: data) {
                    let contentType = serverData.payload.contentType
                    let message = serverData.message
                    let filename = payload.filename
                    let count = payload.data.count

                    print("contentType: ", contentType)
                    print("filename: ", filename)
                    print("data count: ", count)

                    showAlert("Server Data", message)

                } else {
                    showAlert("Server-Response Error", "Unable to decode server response")
                }

                // Process data if needed
            } else {
                print("Error: Unexpected response")
            }
        } catch {
            showAlert("Error", "\(error)")
        }
    }

struct ServerResponse: Content {
    let message: String
    let payload: PayloadModel?

    // Provide an initializer that takes the required parameters
    init(message: String, payload: PayloadModel? = nil) {
        self.message = message
        self.payload = payload
    }

    // Implement the required initializer for the Decodable protocol
    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        message = try container.decode(String.self, forKey: .message)
        payload = try container.decodeIfPresent(PayloadModel.self, forKey: .payload)
    }

    // Define coding keys to match the properties
    enum CodingKeys: String, CodingKey {
        case message
        case payload
    }
}

func storeImage(req: Request) async throws -> ServerResponse {
//    let payload = try req.content.decode(PayloadModel.self)
    let response = ServerResponse(message: "Holy Shit, Batman! I'm from storeImage!!", payload: nil)
    return response
}

• 已简化代码定位问题：发送纯字符串请求可成功
• 曾尝试调整Vapor的请求体大小限制，但无效果（相关代码已注释）

为何会出现请求体过大问题？原因是什么？该如何解决？

[ WARNING ] Abort.413: Payload Too Large [request-id: 3224652A-0F82-43E9-AA7A-92496FB7781D]

原因分析 #

1. JSON编码体积膨胀：将图片Data直接通过JSONEncoder编码为JSON时，Data会被转成Base64字符串，体积会增加约33%——466KB的图片转成Base64后会超过600KB，而Vapor默认的JSON请求体大小限制为64KB，直接触发413错误。
2. 传输方式不合理：用JSON传输二进制图片并非最优方案，既增大了数据体积，也额外增加了编码解码的性能开销。

解决方法 #

方案1：临时调整Vapor的JSON请求体限制 #

在Vapor项目的configure.swift中修改JSON解码器的最大尺寸限制：

import Vapor

func configure(_ app: Application) throws {
    // 调整JSON请求体最大限制为2MB（可根据实际需求修改）
    app.content.configuration.decoders[JSONDecoder.self].userInfo[.maxSize] = 2 * 1024 * 1024
    // 其他项目配置代码...
}

方案2：改用Multipart/form-data传输图片（推荐） #

这是文件上传的标准方式，可避免Base64体积膨胀，传输效率更高：

iOS客户端修改

func uploadImageToServer() async {
    let sampleImage = "ToiletOnTheSea"
    guard let image = UIImage(named: sampleImage), let imageData = image.pngData() else {
        showAlert("无图片", "无法访问图片 \(sampleImage)")
        print("图片转Data失败")
        return
    }

    var request = URLRequest(url: serverURL)
    request.httpMethod = "POST"
    
    // 构建Multipart表单
    let boundary = UUID().uuidString
    request.setValue("multipart/form-data; boundary=\(boundary)", forHTTPHeaderField: "Content-Type")
    
    var httpBody = Data()
    // 添加filename字段
    httpBody.append("--\(boundary)\r\n".data(using: .utf8)!)
    httpBody.append("Content-Disposition: form-data; name=\"filename\"\r\n\r\n".data(using: .utf8)!)
    httpBody.append("\(sampleImage)\r\n".data(using: .utf8)!)
    // 添加contentType字段
    httpBody.append("--\(boundary)\r\n".data(using: .utf8)!)
    httpBody.append("Content-Disposition: form-data; name=\"contentType\"\r\n\r\n".data(using: .utf8)!)
    httpBody.append("image/png\r\n".data(using: .utf8)!)
    // 添加图片数据
    httpBody.append("--\(boundary)\r\n".data(using: .utf8)!)
    httpBody.append("Content-Disposition: form-data; name=\"image\"; filename=\"\(sampleImage).png\"\r\n".data(using: .utf8)!)
    httpBody.append("Content-Type: image/png\r\n\r\n".data(using: .utf8)!)
    httpBody.append(imageData)
    httpBody.append("\r\n--\(boundary)--\r\n".data(using: .utf8)!)
    
    request.httpBody = httpBody

    do {
        let (data, response) = try await URLSession.shared.data(for: request)
        if let httpResponse = response as? HTTPURLResponse {
            print("状态码: \(httpResponse.statusCode)")
            // 后续业务处理逻辑...
        }
    } catch {
        showAlert("错误", "\(error)")
    }
}

Vapor服务器修改

更新路由处理逻辑，解析Multipart表单：

func storeImage(req: Request) async throws -> ServerResponse {
    // 解析Multipart表单
    let form = try await req.content.decode(MultipartForm.self)
    
    guard let filename = form["filename"]?.string,
          let contentType = form["contentType"]?.string,
          let imagePart = form["image"]?.first,
          let imageData = imagePart.data else {
        throw Abort(.badRequest, reason: "表单数据不完整")
    }
    
    // 这里可添加图片存储等业务逻辑
    print("收到图片：\(filename)，类型：\(contentType)，大小：\(imageData.count)字节")
    
    return ServerResponse(message: "图片上传成功", payload: PayloadModel(filename: filename, contentType: contentType, data: imageData))
}

方案3：直接传输二进制数据（极简方式） #

如果不需要额外字段，可直接将图片Data作为请求体发送：

iOS客户端

func uploadImageToServer() async {
    // ... 获取imageData逻辑不变
    var request = URLRequest(url: serverURL)
    request.httpMethod = "POST"
    request.setValue("image/png", forHTTPHeaderField: "Content-Type")
    request.setValue("\(imageData.count)", forHTTPHeaderField: "Content-Length")
    request.httpBody = imageData
    
    // ... 后续请求处理逻辑
}

Vapor服务器

func storeImage(req: Request) async throws -> ServerResponse {
    let imageData = try await req.body.collect()
    // 处理图片数据
    return ServerResponse(message: "图片接收成功", payload: PayloadModel(filename: "默认文件名", contentType: "image/png", data: imageData))
}

内容的提问来源于stack exchange，提问作者Frederick C. Lee