尝试使用TextureLoader从Rails应用连接到S3时出现CORS错误

Question

这让我发疯。 我已经用谷歌/必应/ altavistad（不是真的！），但没有取得任何重大进展。 我有一个脚本可以将纹理加载到球体上。

var loader = new THREE.TextureLoader();

//allow cross origin loading
loader.crossOrigin = '';
loader.load(window.photo_url,
// Function when resource is loaded
  function ( texture ) { 
    sphereMaterial.map = texture;
    var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
    scene.add(sphereMesh);
    // Start the update frame part
    requestAnimationFrame(update);
  }
)

window.photo_url在另一个代码段中设置。 我的S3存储桶现在处于其最宽松的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>DELETE</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
        <AllowedHeader>origin</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

但是，这不能始终如一地工作，并且会不时产生与COR相关的错误。 该页面可在笔记本电脑上的Chrome和Safari上使用。 但是，在我的手机上，它可以在Chrome上运行，但不能在Safari上运行。 在另一部手机上，该页面在Chrome和Safari上均不起作用。 有趣的是，在同一页面上，我使用同一s3存储桶中的image_tag加载了图像，并且这些图像都显示出来。 实际上，其中一幅图像是我试图在上面的脚本中使用的图像，当使用image_tag提取图像时，它显示得很好。

有人遇到类似问题吗？ 有任何想法吗？

Answer 1

在核心中，尝试将加载程序更改为：

loader.setCrossOrigin( "anonymous" );

Answer 2

要进行测试，而不是使用通配符* ，请尝试将您的来源授予许可。 例如： <AllowedOrigin>http://127.0.0.1:8000</AllowedOrigin> 。

浏览器会从允许阻止JavaScript GET/PUT/DELETE/POST的情况下，域的请求不是API请求相同的。

但是，使用<img>标记加载的图像不受限制，并且几乎可以从Web上的任何位置请求图像。 同样适用于加载外部CSS / JavaScript文件之类的资产。

Answer 3

因此，在深入研究之后，我最终在服务器上编写了一个简单的图像代理。