我在跨源图像方面遇到了一些问题,希望您能提供帮助。
这里是行为。我有 2 个域,例如: -domain1.com -domain2.com
在domain1上我放了很多html5游戏。该域只是游戏的存储库。
Domain2是真正的网站(wordpress网站),用户可以在其中玩domain1上托管的游戏。为此,我为每场比赛提出了一个curl 请求。
在domain1 nginx配置文件中,我放置了以下几行代码来启用跨域资源共享:
位置 ~* \.(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 "访问控制允许来源" "*";
访问_注销;
log_not_found关闭;
最大过期时间;
}
这解决了许多游戏的一些问题,但有些游戏仍然无法运行,我收到以下 js 错误:
未捕获的 DOMException:无法在“WebGLRenderingContext”上执行“texImage2D”:可能无法加载 http://domain1.com/html5-games/action/candy-match/images/loadingbarbackground-sheet0.png 处的跨源图像。
在GLWrap_.loadTexture(http://domain1.com/html5-games/action/candy-match/c2runtime.js:2618:16)
在pluginProto.Type.typeProto.loadTextures(http://domain1.com/html5-games/action/candy-match/c2runtime.js:18070:46)
在pluginProto.Instance.instanceProto.onCreate(http://domain1.com/html5-games/action/candy-match/c2runtime.js:18146:13)
在 Runtime.createInstanceFromInit (http://domain1.com/html5-games/action/candy-match/c2runtime.js:4806:8)
在 Layer.createInitialInstances (http://domain1.com/html5-games/action/candy-match/c2runtime.js:7541:25)
在 Layout.startRunning (http://domain1.com/html5-games/action/candy-match/c2runtime.js:6715:10)
在 Runtime.go_loading_finished (http://domain1.com/html5-games/action/candy-match/c2runtime.js:4067:36)
在 Runtime.go (http://domain1.com/html5-games/action/candy-match/c2runtime.js:3966:9)
在http://domain1.com/html5-games/action/candy-match/c2runtime.js:4025:60
我在网上做了一些研究,发现像这样的文章 https://webglfundamentals.org/webgl/lessons/webgl-cors-permission.html 使用 img.crossOrigin = "Anonymous" 将图像绘制到画布不起作用
但它们并没有多大帮助。
我不想修改原始游戏文件。我正在寻找服务器端解决方案(如果存在)。如果没有,您有解决我的问题的想法吗?
我的配置有什么错误吗?我错过了什么吗?
感谢您的帮助。
瓦莱里奥