我在将 S3 托管的 JPG 作为纹理加载到我的 three.js 模型时遇到问题。我在 Chrome 中遇到了一个 CORS 错误,意识到 S3 支持 CORS 并制定了一个非常宽松的政策来在开发过程中检查它(我以前从未遇到过 CORS)。 Firefox 没问题,但 Chrome 和 Safari 仍然出错。
JPG 通过 THREE.ImageUtils.loadTexture() 加载到纹理中,然后将该纹理应用于 Material 。
我尝试在加载之前将以下内容添加到图像中,但它似乎不起作用:
img.crossOrigin = '';
我当前的 CORS 策略是完全开放的:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
</CORSRule>
</CORSConfiguration>
Chrome 的错误是
38 Cross-origin image load denied by Cross-Origin Resource Sharing policy.
有人可以给我任何提示吗?
更新:
事实证明,我只是没有在代码中足够早地设置 img.crossOrigin 以使其有用。愚蠢的错误:(
AllowHeader 提示很有用,谢谢!
最佳答案
尝试在标题中添加 Content-。
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>
关于amazon-s3 - Chrome 和 Safari 中 THREE.js 和 S3 的 CORS 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12845392/