Question

我尝试使用three.js加载图像并将其显示在画布上。

简单的代码几乎直接来自the ImageLoader docs

function loadImages(){
  var images = json.images;

  var loader = new THREE.ImageLoader();
      loader.setCrossOrigin(' ');

  for(var i = 0; i<images.length; i++){

    var uri = images[i].server + '/1200x900' + images[i].uri;

    loader.load(
      uri,

      function ( image ) {
        var canvas = document.createElement( 'canvas' );
        var context = canvas.getContext( '2d' );
        context.drawImage( image, 100, 100 );
      },

      function ( xhr ) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
      },

      function ( xhr ) {
        console.log( 'An error happened' );
      }
    );
  }

}

图片来自AWS，在我的浏览器中我得到：

XMLHttpRequest无法加载。 No＆＃39; Access-Control-Allow-Origin＆＃39;标题出现在请求的上资源。起源＆＃39; http://localhost:3000＆＃39;因此是不允许的访问。

我在这里做错了什么？我还设置了BrowserSync，以便在我的localhost服务器上设置cors标头，如下所示：

 browserSync.init({
        server: {
            baseDir: "./",
            middleware: function (req, res, next) {
                res.setHeader('Access-Control-Allow-Origin', '*');
                res.setHeader('Access-Control-Request-Method', '*');
                res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
                res.setHeader('Access-Control-Allow-Headers', '*');
                if ( req.method === 'OPTIONS' ) {
                    res.writeHead(200);
                    res.end();
                    return;
                }
                next();
            }
        }
    });

无论我尝试什么，我都无法加载图像！

three.js ImageLoader CORS错误

0 个答案: