CORS误差THREE.js和S3的Chrome浏览器和Safari浏览器 [英] CORS error with THREE.js and S3 in Chrome & Safari

问题描述

我有一个问题加载S3托管JPG到我three.js模型作为纹理。我在Chrome中有一个CORS误差，实现了S3支持CORS，放在一个非常宽松的政策，以检查它的发展过程中（我从来没有碰到CORS之前）。 Firefox是不错，但Chrome和Safari还是错误的。

I'm having an issue loading an S3 hosted JPG into my three.js model as a texture. I got a CORS error in Chrome, realised S3 supports CORS and put in a very liberal policy to check it out during development (I've never run into CORS before). Firefox is fine but Chrome and Safari still error out.

的JPG经由THREE.ImageUtils.loadTexture（装入纹理），然后将该纹理施加到材料

The JPG is loaded into a texture via THREE.ImageUtils.loadTexture() and then that texture is applied to a material.

我尝试添加以下装载前的图像，但它似乎并没有工作：

I tried adding the following to the image before loading but it didn't seem to work:

img.crossOrigin = '';

目前CORS政策，我是敞开的：

The current CORS policy I have is wide open:

<?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的误差

Chrome's error is

38 Cross-origin image load denied by Cross-Origin Resource Sharing policy.

谁能给我任何提示就这个吗？

Can anyone give me any tips on this please?

更新：

所以，事实证明，我只是没有设置img.crossOrigin及早在$ C $下它是有用的。愚蠢的错误：（

So it turns out that I just wasn't setting img.crossOrigin early enough in the code for it to be useful. Stupid mistake :(

在AllowHeader提示是有用的，虽然，谢谢！

The AllowHeader tips are useful though, thanks!

推荐答案

尝试在头部添加内容 - 。

Try adding Content- in the header.

<?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>

这篇关于CORS误差THREE.js和S3的Chrome浏览器和Safari浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！