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

Posted 2023-03-04

【中文标题】尝试使用 TextureLoader 从 Rails 应用程序连接到 S3 时出现 CORS 错误

【英文标题】：CORS error while trying to connect to S3 from a rails app using TextureLoader

【发布时间】：2017-05-22 14:38:14

【问题描述】：

这让我发疯了。我已经用谷歌搜索/binged/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 在另一个代码 sn-p 中设置。 我的 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 获取时，它显示得很好。

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

【问题讨论】：

确切的错误是什么？

Chrome 控制台中显示的错误是：从原点 'yyyy' 访问图像在 'xxxxxamazonaws.com/uploads/88b12c8c-1829-45fa-93a3-63e7cdb83bca/…' 已被 CORS 策略阻止：没有 'Access-Control-Allow-Origin' 标头存在于请求的资源上。因此，不允许访问 Origin 'yyyy'。

【参考方案1】：

要测试，而不是使用通配符 *，请尝试将您的来源置于许可范围内。 例如：<AllowedOrigin>http://127.0.0.1:8000</AllowedOrigin>.

如果 API 请求的域不同，浏览器会阻止 javascript 允许 GET/PUT/DELETE/POST请求。

但是，使用<img> 标签加载的图像不受限制，几乎可以从网络上的任何地方请求图像。同样适用于加载外部 CSS/JavaScript 文件等资产。

【讨论】：

嗨 Aniket，我从我的网站开始，但由于那不起作用，我去了通配符

【参考方案2】：

在内核中，尝试将加载器更改为：

loader.setCrossOrigin( "anonymous" );

【讨论】：

这与我已经在“loader.crossOrigin = '';”行中所做的有什么不同？我也试过匿名。

【参考方案3】：

所以在进行了更多研究之后，我最终在我的服务器上编写了一个简单的图像代理。