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

Question

我正在开发一个从 S3 检索文件的小型 javascript 浏览器脚本。
在向 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

仅由 <script> 加载的内容受 CORS 限制，但直接由 DOM 加载的内容不受限制。
如果不了解您是如何生成链接的，就很难给出明确的答案。调试问题的一种简单方法是简单地添加 crossorigin属性到您的图像标签，如 <img src="..." crossorigin /> .如果它停止渲染，则问题出在链接上。
您的配置看起来正确。剩下的最常见原因是您在预签名 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,
});