MAUI Blazor Hybrid调用ASP.NET API上传图片遇连接失败错误

以下是针对你遇到的连接失败问题的排查和解决方案：

一、基础网络连通性排查 #

1. 确认设备同网：确保手机和运行API的电脑连接到同一WiFi网络。
2. 测试API可达性：用手机浏览器访问 http://192.168.1.5:5025/swagger，如果无法打开：
   • 检查电脑防火墙是否开放了5025端口的入站连接；
   • 确认ASP.NET API确实绑定了192.168.1.5:5025（查看API项目的launchSettings.json，确保applicationUrl包含该地址）。

二、Android明文HTTP限制处理 #

Android 9及以上版本默认禁止明文HTTP请求，需要配置允许访问本地IP：

1. 在Android项目的Resources/xml目录（无则新建）创建network_security_config.xml：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">192.168.1.5</domain>
    </domain-config>
</network-security-config>

2. 修改AndroidManifest.xml，在<application>标签中添加配置引用：

<application android:networkSecurityConfig="@xml/network_security_config">
    <!-- 其他原有内容 -->
</application>

三、API端配置调整 #

1. HTTPS重定向问题：
   你的API启用了app.UseHttpsRedirection();，但客户端使用HTTP请求，会被强制重定向导致连接异常。开发环境可暂时注释该行代码，或在launchSettings.json中配置API同时监听HTTP和HTTPS。
2. CORS配置优化：
   当前CORS策略使用AllowAnyOrigin虽能覆盖需求，但可明确指定允许的来源以避免潜在问题：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowOriginPolicy", builder =>
    {
        builder.WithOrigins("http://192.168.1.5:5025", "http://localhost:5025")
               .AllowAnyHeader()
               .AllowAnyMethod();
    });
});

四、客户端代码优化 #

1. 替换async void为async Task：
   Blazor中使用async void可能导致异常无法被正确捕获，修改方法签名：

private async Task IncrementCount()

2. 注入HttpClient而非手动创建：
   在MauiProgram.cs中注册HttpClient服务：

builder.Services.AddHttpClient();

在组件中注入并使用：

@inject HttpClient HttpClient

@code {
    // ...
    using (var content = new MultipartFormDataContent())
    using (var imageContent = new StreamContent(stream))
    {
        content.Add(imageContent, "image", "image.jpg");
        try
        {
            var response = await HttpClient.PostAsync(apiUrl, content);
            // ... 后续逻辑
        }
        catch (HttpRequestException ex)
        {
            await Swal.FireAsync("错误", $"请求失败: {ex.Message}", "error");
        }
    }
}

3. 修正弹窗提示文案：
   当前成功/失败提示文案混淆，调整为清晰的提示：

if (response.IsSuccessStatusCode)
{
    await Swal.FireAsync("成功", "图片上传完成", "success");
}
else
{
    await Swal.FireAsync("失败", $"请求错误: {response.StatusCode}", "error");
}

五、API端文件保存路径问题 #

确保API项目的wwwroot/images目录存在，否则会抛出异常导致请求失败，可在代码中添加目录判断：

var imageDir = Path.Combine("wwwroot", "images");
if (!Directory.Exists(imageDir))
{
    Directory.CreateDirectory(imageDir);
}
var imagePath = Path.Combine(imageDir, image.FileName);

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