即使在DigitalOcean Spaces用户界面中添加CORS设置后，对象中也缺少访问控制-允许-原点标头

我在DigitalOcean Spaces用户界面中添加了CORS配置，如下所示：

我仍然无法从浏览器获得对象请求的Access-Control-Allow-Origin头。

从我的后端上载对象时，"；PUBLIC-Read"；设置为ACL。

我期望在浏览器中从我的Web应用程序发出对象(在我的例子中为图像)请求时，其响应标头应为access-control-allow-origin: http://my.machine.localhost。

当画布组件具有来自非来源来源的图像时，这是HTML canvas toDataURL()的硬要求。

---

解决方案

首先是本地主机问题

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

127.0.0.1        my.machine.localhost

这样很容易在Do Spaces CORS设置中进行配置，然后在浏览器中点击my.machine.localhost就可以打开在本地主机上运行的应用程序(我在端口80上运行我的应用程序)。

第二，CORS标题

关闭CDN，直到问题解决或需要多次刷新缓存。使用curl或httpie或类似于测试的内容，因为浏览器倾向于缓存对象。

我假设对象是使用public-readACL上载的。

现在使用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 Spaces实施与AWS S3相同的API。因此，最好在卡住时查找S3文档。我在AWS S3 CORS文档https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors-troubleshooting.html

中找到了这个

如果标头丢失，Amazon S3不会将请求视为 跨域请求，并且不在 响应。

有许多在线教程建议使用s3cmd并使用通配符设置CORS*-在执行这些操作之前要三思而后行，因为这非常不安全。