Blazor Server应用中调用JavaScript出现CS1503错误如何解决？

报错解决方案 #

你遇到的CS1503编译错误和运行问题可以通过以下步骤修复：

1. 匹配参数传递规则
   IJSRuntime.InvokeAsync方法的第二个入参为params object?[]类型，如果你确实需要向JS传递DotNetObjectReference用于后续C#方法回调，要么直接省略不需要的参数，要么显式将参数包裹为数组即可解决类型转换报错：

// 如果你不需要JS回调C#，直接省略参数即可
private async Task callWidgetApplication()
{
    var fetched = await JSRuntime.InvokeAsync<bool>("fetchComponenent");
}

// 如果你需要传递DotNetObjectReference给JS回调
private async Task callWidgetApplication()
{
    // 用using自动释放引用避免内存泄漏
    using var dotNetRef = DotNetObjectReference.Create(this);
    var fetched = await JSRuntime.InvokeAsync<bool>("fetchComponenent", new object[] { dotNetRef });
}

同时修改Widget.js的函数签名匹配入参：

// 不需要回调的版本
function fetchComponenent() {
    return true;
}

// 需要回调的版本
function fetchComponenent(dotNetRef) {
    // 后续调用C#方法可使用 dotNetRef.invokeMethodAsync("方法名", 参数)
    return true;
}

2. 修复异步方法定义
   不要用async void定义Blazor中的异步方法，会导致异常无法被框架捕获，统一替换为async Task。
3. 引入JS文件
   在Blazor Server的入口文件Pages/_Host.cshtml的</body>标签前添加JS引用，否则运行时会报找不到函数的错误：

<script src="Widget.js"></script>

跨站获取HTML的最优方案 #

通过JS Ajax请求跨站HTML会受到浏览器同源策略限制，需要目标站点配置CORS规则才能正常请求，更稳妥的实现方式是走服务端代理：

• 直接在Blazor Server后端通过HttpClient请求目标站点的HTML内容，服务端请求没有同源策略限制，不会遇到跨域问题
• 拿到HTML内容后直接传递给前端组件渲染即可，无需调用JS，性能和可控性都更好

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