Blazor组件注入JavaScript文件出现404错误求助

参考官方教程尝试在InteractiveServer模式的Blazor组件中引入JS文件，但遇到404错误，具体信息如下：

组件代码 #

@page "/interop"
@rendermode InteractiveServer
@inject IJSRuntime JS
@implements IAsyncDisposable


<h1>JS Collocation Example 2</h1>

<button @onclick="ShowPrompt">Call showPrompt2</button>

@if (!string.IsNullOrEmpty(result))
{
    <p>
        Hello @result!
    </p>
}

@code {
    private IJSObjectReference? module;
    private string? result;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import", "./Components/Pages/MYFun.js");
        }
    }

    private async Task ShowPrompt()
    {
        if (module is not null)
        {
            result = await module.InvokeAsync<string>("showPrompt2", "What's your name?");
            StateHasChanged();
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
}

JavaScript文件内容 #

export function showPrompt2(message) {
    return prompt(message, 'Type your name here');
}

JS文件实际路径 #

CSharp\DEMO\Components\Pages\MYFun.js

错误信息 #

[2024-06-23T05:24:20.559Z] Information: Normalizing '_blazor' to 'http://localhost:5245/_blazor'.
blazor.web.js:1 [2024-06-23T05:24:20.592Z] Information: WebSocket connected to ws://localhost:5245/_blazor?id=O03_Mc_d_ex3fD7KNrTZuA.
blazor.web.js:1

        GET http://localhost:5245/Components/Pages/MYFun.js net::ERR_ABORTED 404 (Not Found)

(anonymous) @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
beginInvokeJSFromDotNet @ blazor.web.js:1
_invokeClientMethod @ blazor.web.js:1
_processIncomingData @ blazor.web.js:1
connection.onreceive @ blazor.web.js:1
i.onmessage @ blazor.web.js:1
[NEW] Explain Console errors by using Copilot in Edge: click

         to explain an error. 
        Learn more
        
          
          
          Don't show again

blazor.web.js:1  [2024-06-23T05:24:20.840Z] Error: There was an unhandled exception on the current circuit, so this circuit will be terminated. For more details turn on detailed exceptions by setting 'DetailedErrors: true' in 'appSettings.Development.json' or set 'CircuitOptions.DetailedErrors'.
log @ blazor.web.js:1
unhandledError @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
_invokeClientMethod @ blazor.web.js:1
_processIncomingData @ blazor.web.js:1
connection.onreceive @ blazor.web.js:1
i.onmessage @ blazor.web.js:1
blazor.web.js:1 [2024-06-23T05:24:20.842Z] Information: Connection disconnected.

解决方案 #

原因 #

Blazor默认仅将wwwroot目录下的文件作为静态文件提供给客户端访问。你的JS文件放在Components/Pages目录，该目录不属于默认静态文件路径，因此客户端请求时返回404。

修复步骤 #

方案1：移动JS文件到wwwroot目录（推荐）

1. 在项目根目录的wwwroot下创建js子目录，将MYFun.js移动到wwwroot/js/MYFun.js。
2. 修改组件中的JS导入路径：

   module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/MYFun.js");
   

方案2：配置静态文件访问路径（不推荐，存在安全风险）

如果必须保留JS文件在原目录，可在Program.cs中添加静态文件映射：

app.UseStaticFiles();
// 新增以下配置
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "Components", "Pages")),
    RequestPath = "/Components/Pages"
});

此方式会暴露Components/Pages下的所有文件，需确保目录内无敏感内容。

验证 #

重启项目后点击按钮，应能正常弹出输入框，不再出现404错误。

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