伙伴們，大家好，今天給大家帶來的是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 限制可能會引入安全風險，特別是在生產環境中。確保你了解這些風險，并采取適當的安全措施。
• 如果你的應用程序是面向用戶的，最好避免使用可能降低安全性的解決方案，并尋找更安全的替代方案。