0

我正在尝试使用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。我可以使用curlS3 控制台从我的 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;

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

选项标题，两个之一 选项标题，两个中的两个

这是随之而来的GET请求和响应标头：

GET 标头，两个之一 GET 标头，两个中的两个

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

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

我尝试了很多东西；很想听听外面的人能想出什么。

提前致谢。

编辑：在 Chrome 中：

控制台工作显示将获取响应转换为表示 JSON 编码缓冲区的文本

4

1 回答 1

0

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;
于 2018-09-15T06:50:13.470 回答