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

Posted 2023-03-22

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

【英文标题】：CORS Request to S3 Accepted for File Display but Not for Load by Javascript Library

【发布时间】：2022-01-12 22:53:45

【问题描述】：

我正在开发一个从 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.

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

谢谢

【参考方案1】：

只有 <script> 加载的内容受 CORS 限制，而直接由 DOM 加载的内容不受。

如果不了解您是如何生成链接的，就很难给出明确的答案。调试问题的一种简单方法是简单地将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,
);