MAUI Blazor中JS读取外部存储文件出现404错误求助

问题分析 #

你遇到的404核心原因是混淆了本地文件系统路径与Web静态资源路径：

• FileSystem.AppDataDirectory返回的是设备本地存储的物理路径（比如Android上的/data/user/0/com.companyname.blazorapp/files/...），但浏览器端JS发起的是HTTP请求，会把这个路径当成网站的URL路径去请求服务器，服务器上根本不存在这个路由，自然返回404。
• 另外浏览器出于安全限制，也不允许直接访问设备本地文件系统的路径。

解决方案 #

1. 调整H5P资源存放位置 #

把你的interactive_video文件夹（包含h5p.json）放到Blazor项目的wwwroot目录下，比如：

wwwroot/
└── h5p/
    ├── assets/
    │   ├── frame.bundle.js
    │   └── styles/h5p.css
    └── contents/
        └── interactive_video/
            └── h5p.json

wwwroot是Blazor默认的静态资源目录，里面的文件会被Web服务器暴露为可访问的URL。

2. 修改C#的GetPath函数 #

返回Web可访问的相对URL，而非本地物理路径：

[JSInvokable]
public static Task<string> GetPath()
{
    // 返回指向wwwroot下资源的相对URL
    return Task.FromResult("/h5p/contents/interactive_video");
}

这里可以去掉async，因为没有实际异步操作，用Task.FromResult直接返回结果即可。

3. 修正JS中的路径参数 #

确保frameJs和frameCss的路径也是正确的相对URL（对应wwwroot下的位置）：

async function play() {
try {
    const { H5P } = H5PStandalone || {};

    DotNet.invokeMethodAsync('BlazorApp', 'GetPath')
        .then(async path => {
            console.log(path);
            await new H5P(document.getElementById('h5p-container'), { 
                h5pJsonPath: path, 
                frameJs: '/h5p/assets/frame.bundle.js', 
                frameCss: '/h5p/assets/styles/h5p.css' 
            })
                .then(function () {
                    H5P.externalDispatcher.on('xAPI', (event) => {
                        console.log('xAPI event: ', event);
                    });
                });
        });
} catch (e) {
    console.log('error : ', e);
}
}

这样调整后，浏览器会请求正确的静态资源URL，就能找到h5p.json文件了。

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