在本地部署在影响 javascript 游戏引擎中编码的 webapp，导致 Chrome 上的 CORS

Posted 2023-03-04

【中文标题】在本地部署在影响 javascript 游戏引擎中编码的 webapp，导致 Chrome 上的 CORS

【英文标题】：Deploying webapp coded in impact javascript game engine locally, results in CORS on chrome

【发布时间】：2014-02-04 19:50:18

【问题描述】：

我正在尝试制作一个 webapp（使用 Impact js 游戏引擎开发），无需本地主机即可在本地运行（使用 file:///C:/...），我需要制作它在 chrome 上工作。

它在 chrome 上不起作用的主要问题是由于 CORS 问题，chrome 会阻止我的媒体（主要是 png/jpg 格式的图像）从媒体文件夹加载。

花了几天时间阅读并尝试了一些方法后，我无法解决这个问题。任何有这方面经验的人请告诉我是否可能，如果可能，我应该采取什么方法。

我尝试过的方法：

1) 设置img.crossOrigin = "anonymous"（失败了，这个还是被chrome屏蔽了）

2) 使用标志 --allow-file-access-from-files 打开 chrome（有效，但对最终用户来说不是可行的方法）

3) 读取图像并将其转换为数据 uri 格式（失败，数据 uri 转换似乎 由于固有的 COR 问题而无法工作）

4) 尝试使用 appcache 将所有图像缓存到浏览器缓存中（失败，似乎不起作用，因为它没有从网络服务器访问）

更新：我现在正在尝试编辑 Impact.image 源代码，以尝试在加载到图像时将 src 转换为数据 url

        load: function( loadCallback ) 

    function getBase64Image(img) 
        // Create an empty canvas element
        var img2 = document.createElement("img");
        var canvas2 = document.createElement("canvas");
        // Copy the image contents to the canvas
        var ctx2 = canvas2.getContext("2d");
        img2.onload = function()
        canvas2.width = img2.width;
        canvas2.height = img2.height;

            ;

        img2.onerror = function() console.log("Image failed!");;
        img2.src = img + '?' + Date.now();
        ctx2.drawImage(img2, 0, 0, img2.width, img2.height);
        return canvas2.toDataURL("image/png");
    

    if( this.loaded ) 
        if( loadCallback ) 
            loadCallback( this.path, true );
        
        return;
    
    else if( !this.loaded && ig.ready ) 
        this.loadCallback = loadCallback || null;
        this.data = new Image();
        this.data.onload = this.onload.bind(this);
        this.data.onerror = this.onerror.bind(this);
        //this.data.src = ig.prefix + this.path + ig.nocache;
        //old src sets to local file, new src sets to data url generated
        this.data.src = getBase64Image(this.path);

    
    else 
        ig.addResource( this );
    

    ig.Image.cache[this.path] = this;
,

由于某种原因，图像没有被加载到函数中，即使我将图像加载加载到 getBase64Image 函数中，它还能工作吗？

【参考方案1】：

没有将所有内容保存为预先生成的 Base-64 数据 uri，您将其烘焙到 JS 文件中，或者“index.html”页面上的脚本标签中，您不是在这里不会有很多运气 - 特别是如果您的意图是将其分发给与网络服务器断开连接的受众（至少为应用缓存提供一个域）。

请注意，为了生成 data-uris，您自己可能需要 localhost（或构建工具）。

【讨论】：

那太麻烦了......可能是我最后的手段，我现在正在尝试另一种方法，我尝试通过编辑影响/图像在加载点将本地 src 转换为数据 url。 js，只是想知道这是否可行，或者 CORs 是否仍会阻止函数中的 canvas.toDataURL

如果一个文件被标记为跨域（当它被加载时），那么它就是它......如果你正在使用画布，那么你用它来绘制标记为跨域的图像（即使没有库）， data-url 导出选项将被锁定。说真的，设置 localhost 非常简单，考虑到所有因素——即使只是在构建面向用户的版本之前在工作环境中构建它。

感谢帮助，决定使用bake data uri方法