React安卓应用连接.NET WebAPI失败，求排查解决方法

问题概述 #

• .NET WebAPI提供的GET接口地址：https://localhost:7162/Collection/get-collections
• React安卓应用中fetch请求错误调用了https://localhost:7162/Collection/api/get-collections
• 报错：

  Possible Unhadled Promise Rejection (id: 0);
  TypeError: Network request failed
  

分步解决方案 #

1. 修正请求地址 #

首先检查并修正fetch请求的URL，确保与后端接口完全一致：

fetch('https://localhost:7162/Collection/get-collections')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
    return res.json();
  })
  .then(data => {
    const uniqueNames = [...new Set(data.map(item => item.name))];
    setItems(uniqueNames.map(name => ({ label: name, value: name })));
  })
  .catch(error => {
    console.error('Fetch操作失败:', error.message);
    throw error;
  });

2. 配置.NET WebAPI的CORS策略 #

移动端跨域请求必须通过CORS授权，在.NET项目中进行如下配置：

1. 安装CORS包（若未安装）：

   dotnet add package Microsoft.AspNetCore.Cors
   

2. 在Program.cs中添加CORS服务并启用：

   var builder = WebApplication.CreateBuilder(args);
   
   // 配置CORS策略
   builder.Services.AddCors(options =>
   {
       options.AddPolicy("AllowMobileApp", policy =>
       {
           // 开发环境可临时允许所有源，生产环境需指定具体移动端域名/IP
           policy.AllowAnyOrigin()
                 .AllowAnyHeader()
                 .AllowAnyMethod();
       });
   });
   
   builder.Services.AddControllers();
   
   var app = builder.Build();
   
   // 启用CORS（需放置在UseRouting之后、UseAuthorization之前）
   app.UseCors("AllowMobileApp");
   
   app.UseHttpsRedirection();
   app.UseAuthorization();
   app.MapControllers();
   
   app.Run();
   

3. 解决移动端访问localhost的映射问题 #

安卓模拟器中的localhost指向模拟器自身，无法访问电脑上的API，需替换为电脑的局域网IP：

1. 查找电脑局域网IP：
   • Windows：运行ipconfig，查看“无线局域网适配器WLAN”或“以太网适配器以太网”下的IPv4地址
   • Mac/Linux：运行ifconfig或ip addr，找到对应网络接口的inet地址
2. 修改fetch地址为：https://你的局域网IP:7162/Collection/get-collections
3. 确保.NET WebAPI监听所有网络接口：修改Properties/launchSettings.json中的applicationUrl：

   "profiles": {
     "https": {
       "commandName": "Project",
       "applicationUrl": "https://0.0.0.0:7162;http://0.0.0.0:5162",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
     }
   }
   

4. 处理HTTPS证书信任问题 #

开发环境.NET生成的自签名HTTPS证书默认不被安卓模拟器信任，有两种处理方式：

• 临时改用HTTP（开发环境）：修改API地址为http://你的局域网IP:5162/Collection/get-collections，同时确保.NET启用HTTP监听（见上述launchSettings.json配置）
• 安装证书到安卓模拟器：
  1. 导出.NET开发证书：在%USERPROFILE%\.aspnet\https目录下找到项目对应的.pfx文件
  2. 转换为CRT格式：使用OpenSSL命令openssl pkcs12 -in 项目名称.pfx -out cert.crt -nokeys
  3. 将cert.crt传入安卓模拟器，通过系统设置→安全→加密与凭据→从存储安装，选择证书并完成安装

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