You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

MAUI Hybrid中BlazorWebView在Android模拟器的HTTP GET请求异常问题

MAUI Hybrid Android端jQuery请求Web API无响应问题排查方案

针对你遇到的问题,从BlazorWebView配置、WebView安全策略、网络环境等几个方向排查,以下是具体解决方案:

1. 阻止BlazorWebView拦截外部API请求

BlazorWebView默认会拦截本地发起的HTTP请求并尝试映射到Blazor路由,导致外部API请求无法正常转发。需要配置允许外部导航:

方法一:通过导航事件过滤

在Mobile项目的BlazorWebView初始化代码(如MainPage.xaml.cs)中添加:

protected override void OnInitialized()
{
    base.OnInitialized();
    MyBlazorWebView.WebView.Navigating += (sender, e) =>
    {
        // 替换为你的Web API域名/地址前缀
        if (e.Url.StartsWith("https://your-api-domain.com/api/"))
        {
            e.Cancel = false; // 允许该请求跳转到外部,不拦截
        }
    };
}

方法二:使用UrlLoadingOptions配置(.NET 10特性)

MyBlazorWebView.UrlLoadingOptions = new UrlLoadingOptions
{
    Strategy = UrlLoadingStrategy.AllowExternalNavigation,
    HostsToAllow = { "your-api-domain.com" } // 允许的外部域名
};

2. 调整Android WebView的安全配置

Android WebView默认限制明文HTTP请求和跨域行为,需修改AndroidManifest.xml
<application>标签内添加:

android:usesCleartextTraffic="true" <!-- 允许明文HTTP请求(若API未用HTTPS)-->

同时确保WebView启用JavaScript并允许跨域访问,可通过自定义Handler配置:

public class CustomBlazorWebViewHandler : BlazorWebViewHandler
{
    protected override void ConfigureAdditionalWebViewSettings(Android.Webkit.WebView webView)
    {
        base.ConfigureAdditionalWebViewSettings(webView);
        webView.Settings.JavaScriptEnabled = true; // 确保jQuery正常运行
        webView.Settings.AllowUniversalAccessFromFileURLs = true;
        webView.Settings.AllowFileAccess = true;
    }
}

然后在MauiProgram.cs注册该Handler:

builder.Services.AddTransient<IBlazorWebViewHandler, CustomBlazorWebViewHandler>();

3. 修正jQuery AJAX请求配置

Home.razor的jQuery请求中明确指定跨域参数,并添加错误日志便于排查:

$.ajax({
    url: "https://your-api-domain.com/api/documents",
    type: "GET",
    crossDomain: true,
    success: function(data) {
        console.log("请求成功:", data);
    },
    error: function(xhr, status, error) {
        console.error("请求失败:", xhr.status, status, error);
    }
});

4. 排查Android模拟器网络问题

  • 若Web API在本地开发机运行,模拟器内不能用localhost,需替换为10.0.2.2(Android模拟器映射本地回环的地址)
  • 检查模拟器网络连接是否正常,可通过浏览器访问API地址验证
  • 关闭本地防火墙,避免拦截模拟器的请求

5. 验证Web项目CORS配置是否生效

确认Web项目的CORS配置正确且顺序无误(需在UseRouting之后、UseAuthorization之前添加):

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

app.UseRouting();
app.UseCors("AllowAll"); // 位置不能错
app.UseAuthorization();

用Postman调用API后,检查响应头是否包含Access-Control-Allow-Origin: *,确认CORS策略生效。

内容的提问来源于stack exchange,提问作者MattDev07

火山引擎 最新活动