Webgl 跨源图像不起作用

我在跨源图像方面遇到了一些问题，希望您能提供帮助。

这里是行为。 我有 2 个域，例如： - 域名1.com - 域名2.com

在domain1上我放了很多html5游戏。该域只是游戏的存储库。

Domain2是真正的网站（wordpress网站），用户可以在其中玩domain1上托管的游戏。 为此，我为每场比赛提出了一个curl 请求。

在domain1 nginx配置文件中，我放置了以下几行代码来启用跨源资源共享：

    location ~* \.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|json|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf|swf|mp3|xml|woff2)$ {
        add_header "Access-Control-Allow-Origin" "*";
        access_log off;
        log_not_found off;
        expires max;
    }

  

这解决了许多游戏的一些问题，但有些游戏仍然无法运行，我收到以下 js 错误：

    Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at http://domain1.com/html5-games/action/candy-match/images/loadingbarbackground-sheet0.png may not be loaded.
        at GLWrap_.loadTexture (http://domain1.com/html5-games/action/candy-match/c2runtime.js:2618:16)
        at pluginProto.Type.typeProto.loadTextures (http://domain1.com/html5-games/action/candy-match/c2runtime.js:18070:46)
        at pluginProto.Instance.instanceProto.onCreate (http://domain1.com/html5-games/action/candy-match/c2runtime.js:18146:13)
        at Runtime.createInstanceFromInit (http://domain1.com/html5-games/action/candy-match/c2runtime.js:4806:8)
        at Layer.createInitialInstances (http://domain1.com/html5-games/action/candy-match/c2runtime.js:7541:25)
        at Layout.startRunning (http://domain1.com/html5-games/action/candy-match/c2runtime.js:6715:10)
        at Runtime.go_loading_finished (http://domain1.com/html5-games/action/candy-match/c2runtime.js:4067:36)
        at Runtime.go (http://domain1.com/html5-games/action/candy-match/c2runtime.js:3966:9)
        at http://domain1.com/html5-games/action/candy-match/c2runtime.js:4025:60

  

我在网上做了一些研究，发现了这样的文章https://webglfundamentals.org/webgl/lessons/webgl-cors-permission.html https://webglfundamentals.org/webgl/lessons/webgl-cors-permission.html 使用 img.crossOrigin = "Anonymous" 将图像绘制到画布不起作用 https://stackoverflow.com/questions/23123237/drawing-images-to-canvas-with-img-crossorigin-anonymous-doesnt-work

但它们并没有多大帮助。

我不想修改原始游戏文件。我正在寻找服务器端解决方案（如果存在）。如果没有，您有解决我的问题的想法吗？

我的配置有什么错误吗？我错过了什么吗？

感谢您的帮助。

Valerio

游戏必须请求跨源图像。仅仅返回正确的标头是不够的。如果游戏本身不通过设置来请求跨源图像crossOrigin属性，那么浏览器将不允许使用图像，即使它们具有正确的标题。

这是一个例子

const gl = document.createElement("canvas").getContext("webgl");
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);

loadImage('https://i.imgur.com/ZKMnXce.png', false);
loadImage('https://i.imgur.com/u6VI8xz.jpg', true);

function loadImage(url, crossOrigin) {
  const img = new Image();
  img.onload = () => { upload(img); };
  if (crossOrigin) {
    img.crossOrigin = '';
  }
  img.src = url;
}

function upload(img) {
  // trap for cors error
  try {
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    log(img.src, "uploaded image");
  } catch (e) {
    log(img.src, e);
  }
}

function log(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}

pre { margin: 0; }

在这里，您甚至可以看到第一个图像返回了 CORS 标头，但不允许使用它，因为crossOrigin没有设置

第二个图像具有相同的标题，但它可以工作，因为我们设置了crossOrigin属性

请注意，您might能够在游戏脚本之前包含这样的脚本，以破解 CORS 支持。

(function() {

function isSameOrigin(url) {
  return (new URL(url, window.location.href)).origin === window.location.origin;
}

function needsCORS(url) {
  // not sure all the URLs that should be checked for
  return !isSameOrigin(url) && !url.startsWith("blob:") && !url.startsWith("data:");
}

const srcSetFn = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'src').set; 

Object.defineProperty(HTMLImageElement.prototype, 'src', {
  enumerable: true,
  set: function(url) {
     if (needsCORS(url)) {
       // Set if not already set
       if (this.crossOrigin !== undefined) {
         this.crossOrigin = '';
       }
     } else {
       this.crossOrigin = undefined;
     }
     // Set the original attribute
     srcSetFn.call(this, url);
  },
});

}());