通过Lambda和API网关从AWS S3下载图像——使用fetch类

Question

我正在尝试使用JavaScript fetch API、AWS API Gateway、AWS Lambda和AWS S3创建一个允许用户上传和下载媒体的服务。服务器使用NodeJs 8.10；浏览器为Google Chrome版本69.0.3497.92（官方版本）（64位）。

从长远来看，允许的媒体包括音频、视频和图像。现在，我很高兴能让这些图片发挥作用。

我遇到的问题：我的浏览器端客户端，使用fetch实现，能够通过API Gateway和Lambda很好地将JPEG上传到S3。我可以使用curl或S3控制台从我的S3存储桶下载JPEG，然后在图像查看器中查看图像。

但是，如果我尝试通过浏览器端客户端下载图像并获取，我将无法在浏览器中显示任何内容。

这是来自浏览器端客户端的代码：

fetch(
  'path/to/resource',
  {
    method: 'post',
    mode: "cors",
    body: an_instance_of_file_from_an_html_file_input_tag,
    headers: {
      Authorization: user_credentials,
      'Content-Type': 'image/jpeg',
    },
  }
).then((response) => {
  return response.blob();
}).then((blob) => {
  const img = new Image();
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
}).catch((error) => {
  console.error('upload failed',error);
});

这是服务器端代码，使用Claudia.js：

const AWS = require('aws-sdk');
const ApiBuilder = require('claudia-api-builder');
const api = new ApiBuilder();

api.corsOrigin(allowed_origin);
api.registerAuthorizer('my authorizer', {
  providerARNs: ['arn of my cognito user pool']
});

api.get(
  '/media',
  (request) => {
    'use strict';

    const s3 = new AWS.S3();
    const params = {
      Bucket: 'name of my bucket', 
      Key: 'name of an object that is confirmed to exist in the bucket and to be properly encoded as and readable as a JPEG',
    };
    return s3.getObject(params).promise().then((response) => {
       return response.Body;
     })
    ;
  }
);

module.exports = api;

以下是Chrome网络面板中的初始OPTION请求和响应标头：

下面是随后的GET请求和响应头：

我感兴趣的是，在S3控制台中，图像大小报告为699873（没有单位），但GET事务的响应体在Chrome中报告为大约2.5 MB（同样，没有单位）。

生成的图像是一个16x16正方形的死链接。我在浏览器的控制台或CloudWatch中没有收到任何错误或警告。

我尝试了很多事情；我很想听听外面的任何人都能想到什么。

提前谢谢。

编辑：在Chrome：

Answer 1

Claudia要求客户端指定它将在二进制有效负载上接受哪种MIME类型。因此，将'Content-type'配置保留在Headers对象客户端：

fetch(
  'path/to/resource',
  {
    method: 'post',
    mode: "cors",
    body: an_instance_of_file_from_an_html_file_input_tag,
    headers: {
      Authorization: user_credentials,
      'Content-Type': 'image/jpeg', // <-- This is important.
    },
  }
).then((response) => {
  return response.blob();
}).then((blob) => {
  const img = new Image();
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
}).catch((error) => {
  console.error('upload failed',error);
});

然后，在服务器端，您需要告诉Claudia响应应该是二进制的，并使用哪种MIME类型：

const AWS = require('aws-sdk');
const ApiBuilder = require('claudia-api-builder');
const api = new ApiBuilder();

api.corsOrigin(allowed_origin);
api.registerAuthorizer('my authorizer', {
  providerARNs: ['arn of my cognito user pool']
});

api.get(
  '/media',
  (request) => {
    'use strict';

    const s3 = new AWS.S3();
    const params = {
      Bucket: 'name of my bucket', 
      Key: 'name of an object that is confirmed to exist in the bucket and to be properly encoded as and readable as a JPEG',
    };
    return s3.getObject(params).promise().then((response) => {
       return response.Body;
     })
    ;
  },
  /** Add this. **/
  {
    success: { 
      contentType: 'image/jpeg', 
      contentHandling: 'CONVERT_TO_BINARY', 
    }, 
  }
);

module.exports = api;