接受对 S3 的 CORS 请求以进行文件显示，但不接受 Javascript 库的加载

Question

我正在开发一个小型 javascript 浏览器脚本，用于从 S3 检索文件。

向 S3 请求 SignedUrl 后，我可以在标签中显示图像，没有任何问题。为此，我更新了 S3 上的 CORS 策略：

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

但是，当我想使用相同的 URL 提取 EXIF 数据（使用ExifReader）时，我收到有关 CORS 策略的错误消息：

Access to fetch at '*SIGNEDURL*' from origin 'null' has been blocked
by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, set the request's mode to
'no-cors' to fetch the resource with CORS disabled.

我不明白两者的行为有何不同。有人可以帮忙吗？

谢谢

Answer 1

只有 a 加载的内容<script>才会受到 CORS 限制，但 DOM 直接加载的内容则不受 CORS 限制。

如果不了解如何生成链接，就很难给出明确的答案。调试问题的一个简单方法是将crossorigin属性添加到图像标签中，例如<img src="..." crossorigin />. 如果它停止渲染，则问题出在链接上。

您的配置看起来正确。最常见的原因是您在预签名 url 时未指定区域。签名的 url 应如下所示：（https://s3.us-east-1.amazonaws.com或您的存储桶所在的任何区域），而不是https://s3.amazonaws.com

这是 v3 客户端的示例

import { GetObjectCommand, S3Client } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

// ...
const s3Client = new S3Client({
  region: 'us-east-1', // <--- NEED THIS
});

const command = new GetObjectCommand({
  Bucket: 'YOUR_BUCKET',
  Key: 'YOUR_OBJECT_KEY',
});

const url = await getSignedUrl(s3Client, command, {
  expiresIn: 3600,
});

或者与老客户：

import AWS from 'aws-sdk';

// ...
const s3Client = new AWS.S3({
  region: 'us-east-1', // <--- NEED THIS
});

const url = s3Client.getSignedUrl('getObject', {
  Bucket: 'YOUR_BUCKET',
  Key: 'YOUR_OBJECT_KEY',
  Expires: 3600,
});