React Native中使用Fetch调用ASP.NET Web API返回200但无法获取数据的问题

我帮你分析下这个问题——Postman能正常拿到数据，但React Native里用fetch请求虽然返回200状态码却拿不到实际数据，这种情况大概率是fetch的处理逻辑或者React Native的特定配置问题，咱们一步步排查：

1. 最常见的坑：忘记解析响应体 #

fetch API默认不会自动将响应解析为JSON，如果你直接打印response对象，看到的只是响应的元数据（状态码、请求头等），根本不是服务器返回的实际数据。你必须显式调用.json()方法来解析：

fetch('http://192.168.1.5:8082/api/ECommerce/GetCategory', {
  method: 'GET',
})
.then(response => {
  console.log('响应状态码:', response.status);
  // 关键步骤：解析JSON响应体
  return response.json();
})
.then(data => {
  console.log('拿到的数据:', data); // 这里才是你要的列表
})
.catch(error => {
  console.error('请求出错:', error);
});

2. 对齐Postman的请求头 #

Postman默认会发送Accept: application/json请求头，而fetch的默认请求头可能不包含这个字段，导致服务器返回的格式不符合预期。你可以手动添加请求头，确保和Postman的请求一致：

fetch('http://192.168.1.5:8082/api/ECommerce/GetCategory', {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
})
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));

3. Android设备的明文HTTP限制 #

如果你是在Android设备上测试，从Android 9（API 28）开始，系统默认禁止明文HTTP请求。即使你拿到了200状态码，也可能因为这个限制导致响应体无法正常读取。你需要添加网络安全配置：

1. 在android/app/src/main/res/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>

4. 查看服务器返回的原始内容 #

如果上面的步骤都没解决问题，你可以把响应转换成文本，看看服务器到底返回了什么——有时候服务器返回的可能不是预期的JSON（比如隐藏的错误页，虽然状态码是200）：

fetch('http://192.168.1.5:8082/api/ECommerce/GetCategory')
.then(response => response.text())
.then(rawText => {
  console.log('服务器返回的原始内容:', rawText);
})
.catch(error => console.error(error));

5. 确认Web API的CORS配置 #

虽然状态码是200说明CORS已经通过，但还是可以确认下ASP.NET Web API的CORS配置是否允许React Native的来源。在开发环境下可以暂时放开所有来源：

// Startup.cs 中的 ConfigureServices 方法
public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAll",
            builder => builder.AllowAnyOrigin()
                              .AllowAnyMethod()
                              .AllowAnyHeader());
    });
    // 其他服务配置
}

// Configure 方法中启用CORS
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 注意顺序：CORS中间件要放在路由之前
    app.UseCors("AllowAll");
    // 其他中间件配置
    app.UseRouting();
    // ...
}

总结 #

优先检查是否调用了.json()解析响应，这是最容易犯的错误。如果还是不行，用response.text()查看原始内容，再结合Android的网络配置、请求头对齐等步骤排查，应该就能解决问题了。

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