我想阅读预签名的 s3 url 的内容

Question

当用户从我的服务器请求数据时，我从数据库中检索三个 S3 链接。这些链接指向具有各种内容类型的对象，例如 data.json、page.html 和 image.jpeg。由于我的 S3 存储桶不是公开的，因此我在将这些对象发送到 UI 之前生成预签名的 URL。

但是，当尝试在浏览器中加载这些预签名 URL 时，不是直接显示内容，而是下载对象。奇怪的是，浏览器可以在UI上渲染image.jpeg，但是无法显示page.html或data.json的内容。

在我的 React 应用程序中，我使用 Axios 来获取这些 URL 的内容，然后将其渲染在页面上：

export const getS3Data = async (url) => {
  try {
    const response = await axiosInstance.get(url);
    return response;
  } catch (error) {
    console.log(error);
    return null;
  };
};

我在服务器端生成预签名 URL，如下所示：

            params = {
                'Bucket': bucket_name,
                'Key': object_key,
                'ResponseContentDisposition': 'inline'  # Set to inline to display content in browser
            }

            # Setting expiration time as 7 days
            pre_signed_url = s3_client.generate_presigned_url('get_object', Params=params , ExpiresIn=604800)

但不幸的是我无法查看渲染的内容。为了交叉检查，当我点击浏览器上的预签名 s3 链接时，它会下载文件而不显示内容。

此时，我不确定问题出在哪里。目前尚不清楚问题是否源于错误地生成预签名 URL，或者我通过 Axios 或浏览器设置访问它们的方式是否存在错误。您能提供的任何指导将不胜感激。

我尝试了以下事情

1. 在生成预先分配的 URL 时尝试了各种参数。例如 'ResponseContentType':'application/json'
2. 尝试通过将其内容类型更改为“application/json”、“text/plain”和其他合适的类型来更改 s3 对象的元数据（MIME 类型）
3. 厌倦了将我的 axios 返回更改为response.data而不是response

Answer 1

找到解决方案了。检查浏览器上的网络选项卡后，我发现所需的请求标头不存在，因此生成 CORS 错误。在存储桶权限中添加所需的跨源资源共享 (CORS) 设置后，CORS 错误得到解决，并且可以查看 contnet。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

注意：我没有在第一步检查 CORS 设置，因为我已经能够从同一个存储桶加载图像，但其他内容没有加载，而且有时浏览器会因为多种原因抛出 CORS 错误，因此避免了它。