S3预签名URL上传异常：200状态码但无响应体

Hey there, let's clear up what's going on here first—this isn't actually an error, it's expected behavior from Amazon S3, and we can adjust your Angular code to handle it properly.

为什么响应体为空？ #

When you successfully upload a file to S3 via a PUT request (even a presigned one), S3 returns a 200 OK status with an empty response body—that's why you see Content-Length: 0 in the response headers. The key indicator that your upload worked is the presence of the ETag header in the response (you already have this in your logs!), which is a hash of the uploaded file that you can use to verify integrity if needed.

Your request headers look perfectly valid:

• Content-Length matches the size of your file (31897)
• Content-Type is correctly set to image/jpeg
• CORS is configured properly (response includes Access-Control-Allow-Origin: *)
• The presigned URL is correctly generated with the public-read ACL (visible in query params)

如何在Angular中正确处理空响应？ #

The issue is that Angular's HttpClient defaults to expecting a JSON response, and when it gets an empty body, it returns null instead of letting you access the full response context. To fix this, adjust your put request options to:

1. Observe the full HTTP response (so you can access headers like ETag)
2. Specify a response type that handles empty content

修改后的S3服务代码： #

public putObject(presignedUrl: string, file: File): Observable<HttpResponse<any>> {
  return this.http.put<any>(presignedUrl, file, {
    observe: 'response', // 获取完整的响应对象（包括状态码、响应头）
    responseType: 'text' // 用text类型处理空响应体，避免JSON解析错误
  });
}

修改后的组件订阅代码： #

this.s3Service.putObject(presignedUrl, file)
  .subscribe( (fullResponse) => {
    // 上传成功的确认：状态码200 + ETag存在
    console.log('File uploaded successfully!');
    const fileETag = fullResponse.headers.get('ETag');
    if (fileETag) {
      console.log('File ETag (for integrity check):', fileETag);
    }
    // 注意：fullResponse.body会是空字符串，这是正常的
  }, (error) => {
    console.error('Upload failed:', error);
  });

额外验证步骤 #

If you want to double-check the upload worked, you can:

• Navigate to the S3 bucket in the AWS Console and confirm the file exists with the public-read ACL
• Use the ETag from the response to compare against the hash of your local file (for small files, S3's ETag matches the MD5 hash; for large multipart uploads, it's a composite hash)

内容的提问来源于stack exchange，提问作者Matt Rowles