开发Frogger游戏：Firefox正常运行但Chrome遭CORS策略拦截的问题求助

这个问题我之前开发本地Demo时也踩过坑！Chrome对file://协议下的跨源限制确实比Firefox严格不少，尤其是当你使用getImageData这类需要读取图片像素数据的API时，很容易触发这个CORS报错。给你几个实用的解决办法：

• 启动本地HTTP服务器（最推荐的长期方案）
  直接打开本地文件属于file://协议，Chrome会默认限制这类场景下的跨源操作。如果用本地HTTP服务器来托管你的游戏文件，就能切换到http://localhost协议，同源环境下就不会有CORS问题了。

  • 如果你有Python，Python3可以直接在项目目录下运行：python -m http.server 8000，然后在Chrome里访问http://localhost:8000/你的游戏页面.html就行。
  • 用Node.js的话，可以先全局安装http-server：npm install -g http-server，然后在项目目录执行http-server，跟着提示的地址访问即可。

• 修改Chrome启动参数（临时调试用，不推荐日常使用）
  这个方法能临时绕过Chrome的本地文件CORS限制，但会降低浏览器的安全性，所以只适合本地调试时用，调试完记得改回去。
  操作步骤：关闭所有Chrome窗口，找到Chrome的快捷方式，右键点击「属性」，在「目标」输入框的末尾添加 --allow-file-access-from-files --disable-web-security（注意前面要加空格），然后点击确定再启动Chrome，此时打开你的游戏文件就不会报错了。

• 将图片转为Base64嵌入HTML
  把图片转换成Base64编码后直接嵌入到HTML里，就不需要从本地文件系统加载图片了，自然也不会触发CORS限制。
  你可以找个在线的图片转Base64工具，把Frog.png转换成对应的Base64字符串，然后在img标签里这样写：<img src="data:image/png;base64,这里替换成你的Base64字符串">，之后再用getImageData读取就没问题了。

内容的提问来源于stack exchange，提问作者NICHOLAS WALLER