Question

我在将一个S3托管的JPG作为纹理加载到我的three.js模型时遇到了问题。我在Chrome中遇到了CORS错误，意识到S3支持CORS并且在开发过程中提出了一个非常宽松的策略来检查它（我之前从未遇到过CORS）。 Firefox很好，但Chrome和Safari仍然出错。

通过THREE.ImageUtils.loadTexture（）将JPG加载到纹理中，然后将该纹理应用于材质。

我尝试在加载之前将以下内容添加到图像中，但它似乎不起作用：

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提示很有用，谢谢！

Answer 1

尝试在标题中添加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>

Chrome中的THREE.js和S3的CORS错误＆amp;苹果浏览器

1 个答案: