伙伴们，大家好，今天给大家带来的是CocosCreator发布的web-desktop获取本地资源。

在很早很早以前，我们把cocos项目发布为web版本的，然后进入到文件夹中直接找到index.html文件来，双击就可以打开我们的游戏，但是现在不行了，为什么呢？因为浏览器为了安全禁止了，我们要解除禁止。

我们按F12看看是什么错误，如下图：

点击详情了解，出现如下图:

可以看到要解除进制，关键在privacy.file_unique_origin 这个选项，我们要改变这个选项的值，那么怎么改变呢？
我们打开浏览器，输入:about:config

点击”接受风险并继续”，出现如下图:

在搜索框中输入: security.fileuri.strict_origin_policy，出现如下图:

双击true,变为false,如下图：

重启浏览器，然后再次打开index.html,就可以加载本地资源了，如下图:

求网页时有时需要下载自定义字体。自定义字体文件一般较大，虽然网上有很多延迟加载字体技术，可提高连接不佳的用户的性能。

如果我们能够知道用户有哪些字体，我们就可以避免加载一些自定义字体。

这就是queryLocalFonts，JavaScript 函数的作用所在——用于收集用户字体信息。

queryLocalFonts是async一个在首次执行时需要用户通过浏览器提示获得权限的函数。 返回一个包含所有可用字体信息的对

象queryLocalFonts数组：FontData

const localFonts=await window.queryLocalFonts();

// [FontData, FontData, ...]

/*
{
  family: "Academy Engraved LET",
  fullName: "Academy Engraved LET Plain:1.0",
  postscriptName: "AcademyEngravedLetPlain",
  style: "Plain",
}
*/

如果您想要针对特定的字体，您也可以直接查询属性postscriptName：

const canelaFonts=await window.queryLocalFonts({
  postscriptNames: ["Canela", "Canela-Bold"],
});

// [FontData, FontData, ...]

queryLocalFonts就可以使用用户已有的字体，就不必下载自定义字体。

需要注意: 权限提示似乎会阻止用户允许该 API ！！！

关注小编的微信公众号 [代码搬砖工]，获取最新国内外前端资讯、面试技巧及实用办公工具，助你职场升级，每日进步！

使用 WebView2 控件时，如果你尝试从 WebView2 加载的页面访问本地静态 HTML 资源，并且遇到了跨域资源共享（CORS）问题，这通常是因为 WebView2 遵循同源策略，这意味着默认情况下，它不允许从一个源加载的页面访问另一个源的资源。

解决此问题的方法取决于你的具体场景和需求。下面是一些可能的解决方案：

1. 使用allow-local-file-access属性

对于本地开发或测试，你可以在 WebView2 控件上设置 allow-local-file-access 属性为 true，这将允许 WebView2 加载的页面访问本地文件系统上的资源。

csharpawait webView2.CoreWebView2.Settings.PutBoolean("allowLocalFileAccess", true);

请注意，这只应该在受信任的环境中使用，因为启用本地文件访问可能会引入安全风险。

2. 设置 CORS 头部

如果你正在尝试从 WebView2 加载的页面访问本地服务器上托管的资源，并且该服务器支持 CORS，你可以配置服务器以发送适当的 CORS 响应头。这允许跨源请求。

例如，在 ASP.NET Core 中，你可以使用 CORS 中间件来配置 CORS 策略。

csharppublic void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options=>
    {
        options.AddPolicy("MyCorsPolicy", builder=>
        {
            builder.WithOrigins("http://example.com", "http://www.example.com")
                    .AllowAnyHeader()
                    .AllowAnyMethod();
        });
    });

    // ... 其他服务配置 ...
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ... 其他中间件配置 ...

    app.UseCors("MyCorsPolicy");

    // ... 其他中间件配置 ...
}

3. 使用代理服务器

如果你无法修改资源服务器的 CORS 配置，你可以设置一个代理服务器来绕过 CORS 限制。代理服务器会接收来自 WebView2 的请求，然后转发到目标资源服务器，并将响应返回给 WebView2。代理服务器可以设置适当的 CORS 响应头来允许跨源请求。

4. 部署到相同源

如果可能的话，将你的静态 HTML 资源和 WebView2 控件部署到相同的源（即相同的域名、端口和协议）。这样，同源策略就不会阻止它们之间的交互。

5. 使用 Web 服务器

对于本地文件，你可以使用一个简单的 Web 服务器（如 IIS Express、Kestrel 或其他任何服务器）来托管这些文件，并通过 HTTP 访问它们，而不是直接通过文件系统。这样，你就可以通过配置服务器来处理 CORS 请求。

注意事项

• 启用本地文件访问或绕过 CORS 限制可能会引入安全风险，特别是在生产环境中。确保你了解这些风险，并采取适当的安全措施。
• 如果你的应用程序是面向用户的，最好避免使用可能降低安全性的解决方案，并寻找更安全的替代方案。