即使在 Digitalocean Spaces UI 中添加 CORS 设置后，对象中仍缺少 access-control-allow-origin 标头

Posted 2023-03-22

【中文标题】即使在 Digitalocean Spaces UI 中添加 CORS 设置后，对象中仍缺少 access-control-allow-origin 标头

【英文标题】：access-control-allow-origin header missing from objects even after adding CORS settings in Digitalocean Spaces UI

【发布时间】：2022-01-15 18:43:13

【问题描述】：

我在 DigitalOcean Spaces UI 中添加了添加的 CORS 配置，如下所示：

我仍然没有从浏览器获得对象请求的 access-control-allow-origin 标头。

从我的后端上传对象时，“public-read”设置为 ACL。

我期待，当对象（在我的情况下为图像）请求是从浏览器中的 Web 应用发出时，它的响应标头应该有 access-control-allow-origin: http://my.machine.localhost。

这是html canvas toDataURL() 的硬性要求，当画布组件包含来自非原始来源的图像时。

【参考方案1】：

首先是localhost问题

DO (DigitalOCean) 不允许您在 CORS 源字段中配置 localhost。为此，您可以更新您的 /etc/hosts 为您的 localhost 提供一个可接受的名称。我有

127.0.0.1        my.machine.localhost

这样很容易在 DO 空间 CORS 设置中进行配置，在浏览器中点击 my.machine.localhost 应该会打开在 localhost 上运行的应用（我在端口 80 上运行我的应用）。

二、CORS标头

在解决问题或必须多次清除缓存之前禁用 CDN。使用curl 或httpie 或类似的东西来测试，因为浏览器倾向于缓存对象。

我假设对象是使用public-read ACL 上传的。

现在使用 curl 或 httpie 检查请求和响应标头。

$ http -v https://***.***.digitaloceanspaces.com/static/images/logo.png

这是棘手的部分 - 即使您配置了 CORS，响应也不会包含 access-control-allow-origin 标头。要使其正常工作，您需要在请求中设置 Origin 标头，该标头需要与您的存储桶的 DO Spaces UI 中配置的至少一个来源相匹配。

$ http -v https://***.***.digitaloceanspaces.com/static/images/logo.png "Origin:http://my.machine.localhost"

这将根据您的配置返回 access-control-allow-origin 和 access-control-allow-methods。

---

DO 空间实现与 AWS S3 相同的 API。所以卡住的时候最好找找S3文档。我在 AWS S3 CORS 文档 https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors-troubleshooting.html

中找到了这个

如果缺少标头，Amazon S3 不会将请求视为 跨域请求，并且不会在 回应。

网上有很多教程建议使用 s3cmd 并使用通配符设置 CORS * - 这样做之前要三思而后行，因为它非常不安全。