webassembly——同源策略问题的处理（浏览器不能加载本地资源的问题）

发布于
在这里插入图片描述

原因：在用chatGPT生成可视化地图前端文件后，打开不能正常显示

WebAssembly是一种新的二进制代码格式，它可以提供更高的性能和更好的安全性。WebAssembly遵循同源策略，这意味着只有与运行WebAssembly代码相同域名下的JavaScript代码才能与之交互。

为了解决WebAssembly同源策略问题，可以使用以下方法：

  1. 使用CORS（跨域资源共享）机制允许其他域名的JavaScript代码访问WebAssembly模块。
  2. 将WebAssembly模块放置在子域名下，并通过设置正确的CORS头来允许主域名下的JavaScript访问。
  3. 使用代理服务器将WebAssembly模块转发到同一域名下的JavaScript代码。
  4. 将WebAssembly模块打包在JavaScript文件中，以便可以在同一域名下访问。

需要注意的是，在处理WebAssembly同源策略问题时，必须确保不会危及应用程序的安全性。因此，在实施任何解决方案之前，请仔细考虑所有可能的风险并进行适当的测试。

webassembly——同源策略问题的处理（浏览器不能加载本地资源的问题）

当你希望浏览器运行本地上的wasm模块时（或者使用fetch对获取本机的URL资源时），你可能会碰到以下问题：

已拦截跨源请求：同源策略禁止读取位于 file:///C:/Users/95461/Desktop/%E6%95%99%E7%A8%8B/index.wasm 的远程资源。（原因：CORS 请求不是 http）。 TypeError: NetworkError when attempting to fetch resource.

这意味者你是在本地直接打开html，并在该页面中企图加载本地文件夹下的wasm文件，因而违背同源策略。 参考资料：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

分析：在加载wasm模块时，会将指向wasm模块的URL作为fetch()的参数 。在一些浏览器中，使用fetch（）直接获取同与html文件同一文件夹下的本地资源时，会触发同源策略问题。

解决途径：

1、使用Microsoft Edge打开本地的“包含加载wasm模块”的html页面。(我当前版本为Microsoft Edge 44.18362.449.0) 。 不是所有浏览器都有同样严格的同源策略，使用edge浏览器可以避免开发过程中碰到此类问题。

2、打开本地http服务器。将页面涉及的资源放置到本地服务器上，再在浏览器上以http://打开（而非file://）。 我一般使用xampp工具箱，挺方便的。将页面资源全部放在xampp指定的文件夹下，具体使用方法请自行查找。

3、对所使用的浏览器进行设置。 以下转载于:https://blog.51cto.com/lindianli/1557510

Chrome:

1、 （1）得到Chrome的安装路径，例如：C:\Program Files\Google\Chrome\Application （2）在命令行窗口，输入安装路径，加上–allow-file-access-from-files参数，例如：

代码语言：javascript
复制
Chrome installation path\chrome.exe --allow-file-access-from-files

重新启动浏览器即可。 2、 在Chrome的快捷方式，右键->属性->目标的文本框中加上参数 --allow-file-access-from-files 例：“C:\Program Files \Google\Chrome\Application\chrome.exe” --allow-file-access-from-files （我没试过）

Firefox：

1、在浏览器的地址栏输入about:config，回车 2、在过滤器（filter）中搜索security.fileuri.strict_origin_policy 3、将security.fileuri.strict_origin_policy设置为false 4、关闭目前开启的所有Firefox窗口，然后重新启动Firefox。 （亲测有效）

在这里插入图片描述
#webassembly#代理服务器#服务器#浏览器#域名