Blazor WASM移动端NavManager.NavigateTo调用API返回404问题

问题场景 #

站点实现多语言切换能力：页面提供语言选择下拉菜单，用户选中目标语言后，调用后端Web API接口将对应区域文化信息写入站点Cookie，完成语言切换。
本地运行时功能全量正常，部署上线后Windows桌面端Chrome访问无异常，但Android Chrome、iOS Safari等移动端浏览器触发语言切换时，请求直接返回404状态码。

实现代码 #

Razor组件UI部分 #

<div class="languageChanger">  
    <select class="form-select" @bind="this.Culture">
        @foreach (var culture in cultures)
        {
            <option value="@culture">@this.Localizer[culture.Name]</option>
        }
    </select>
</div>

Razor组件C#逻辑部分 #

CultureInfo[] cultures = new[]
{
    new CultureInfo("en-US"),
    new CultureInfo("bg-BG")
};

public CultureInfo Culture
{
    get => CultureInfo.CurrentCulture;
    set
    {
        if (CultureInfo.CurrentCulture != value)
        {
            var js = (IJSInProcessRuntime)this.JsRuntime;
            js.InvokeVoid("SimeonValevPortfolioCulture.set", value.Name);

            var uri = new Uri(this.NavManager.Uri).GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
            var query = $"?cultureName={Uri.EscapeDataString(value.Name)}&redirectUri={Uri.EscapeDataString(uri)}";

            this.NavManager.NavigateTo($"api/Culture/SetCulture" + query, forceLoad: true);
        }
    }
}

Web API控制器动作部分 #

[HttpGet]
public IActionResult SetCulture(string cultureName, string redirectUri)
{
    if (cultureName != null)
    {
        this.HttpContext.Response.Cookies.Append(
            CookieRequestCultureProvider.DefaultCookieName,
            CookieRequestCultureProvider.MakeCookieValue(
                new RequestCulture(cultureName)), new CookieOptions()
                {
                    Expires = DateTimeOffset.UtcNow.AddMonths(1),
                });
    }

    return this.LocalRedirect(redirectUri);
}

异常特征 #

• 本地开发环境全端访问正常
• 生产环境Windows 10桌面端Chrome功能完全可用
• 生产环境移动端访问必现404，触发跳转的目标URL格式为https://MySiteName.com/api/Culture/SetCulture?cultureName=bg-BG&redirectUri=%2F
• 异常仅出现在移动端设备，桌面端无复现

问题排查与修复 #

最高优先级修复：修正跳转路径为根路径绝对地址 #

现有代码中NavManager.NavigateTo使用的是无前导斜杠的相对路径api/Culture/SetCulture，这是导致问题的核心原因：
桌面端Chrome对相对路径解析容错性高，无论当前页面地址是否带尾斜杠，都会将相对路径解析到站点根目录下；但移动端浏览器、PWA离线缓存、部分反向代理对相对路径解析严格，若当前页面地址带尾斜杠、或基路径解析存在偏差，会将该相对路径解析为当前页面子路径下的地址，导致路由匹配失败返回404。
直接修改跳转路径为带前导斜杠的根路径即可：

// 替换原有NavigateTo调用代码
this.NavManager.NavigateTo($"/api/Culture/SetCulture{query}", forceLoad: true);

次优先级检查：路由大小写匹配规则 #

部分移动端浏览器、Nginx/CDN等反向代理节点默认开启路径大小写敏感校验，桌面端Chrome会自动兼容路径大小写差异，移动端不会。如果后端路由实际注册路径与代码中书写的路径大小写不一致，就会出现移动端404、桌面端正常的现象。
可以通过给控制器添加明确的路由特性固定路径格式，避免大小写匹配问题：

[Route("api/[controller]/[action]")]
public class CultureController : Controller
{
    // 原有SetCulture动作代码保持不变
}

同时检查反向代理配置，可选择开启路径大小写不敏感匹配，统一路由规则。

配置层检查：CDN/边缘节点缓存规则 #

如果生产环境使用了CDN加速，需要检查CDN的移动端UA专属缓存规则：部分CDN默认会对移动端请求配置更激进的静态缓存策略，可能误将/api开头的动态请求识别为静态资源，直接返回缓存的404页面。需要给/api路径配置强制透传、不缓存规则，确保请求能到达源站接口。

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