React Native本地开发调用.NET Core GraphQL API的主机名问题求助

一、先确认网络连通性 #

• 打开Android模拟器内置浏览器，直接访问你的API地址（比如http://10.0.2.2:5000/graphql或本地IP+端口），看能否正常加载GraphQL playground或返回响应。如果浏览器都无法访问，优先排查API的网络配置，而非RN代码。
• 检查.NET Core项目的launchSettings.json，确保applicationUrl设置为http://0.0.0.0:5000;https://0.0.0.0:5001（替换成你的实际端口），避免API仅监听localhost导致外部无法访问。

二、确保请求格式符合GraphQL要求 #

GraphQL对请求格式有严格要求，不管用axios还是fetch，都要满足以下条件：

• 请求方法必须为POST
• 请求头需设置Content-Type: application/json
• 请求体必须包含query字段（查询操作），带变量时需额外添加variables字段

fetch示例代码 #

const fetchGraphQLData = async () => {
  try {
    const response = await fetch('http://10.0.2.2:5000/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query: `query GetSampleData {
          sampleItems {
            id
            title
          }
        }`
      }),
    });
    // 先检查响应状态码
    if (!response.ok) throw new Error(`请求失败：${response.statusText}`);
    const result = await response.json();
    console.log('返回数据:', result);
    // 处理数据逻辑
  } catch (error) {
    console.error('详细错误:', error);
  }
};

axios示例代码 #

import axios from 'axios';

const fetchGraphQLData = async () => {
  try {
    const response = await axios.post('http://10.0.2.2:5000/graphql', {
      query: `query GetSampleData {
        sampleItems {
          id
          title
        }
      }`
    }, {
      headers: {
        'Content-Type': 'application/json',
      }
    });
    console.log('返回数据:', response.data);
    // 处理数据逻辑
  } catch (error) {
    // 打印完整错误信息，包括响应状态和内容
    console.error('请求错误:', error.response?.data || error.message);
  }
};

三、配置.NET Core的CORS策略 #

RN的请求属于跨域请求，默认会被.NET Core拦截，需在API中添加CORS配置：

1. 在Program.cs中注册CORS服务：

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

2. 在中间件链中启用CORS（需放在UseRouting之后、UseAuthorization之前）：

app.UseCors("AllowRN");

注：开发环境用AllowAnyOrigin即可，生产环境需限制为RN应用的具体域名。

四、排查RN代码的潜在问题 #

• 强制捕获并打印完整错误：不要只打印error，要打印error.response（axios）或response.status/response.statusText（fetch），确认是否是4xx/5xx状态码导致的无数据返回。
• 核对查询语句：确保GraphQL查询的字段名、结构和Swagger中测试的完全一致，GraphQL对语法错误零容忍，拼写错误、缺少括号都会导致无有效数据。
• 检查Android权限：确认AndroidManifest.xml中已添加<uses-permission android:name="android.permission.INTERNET" />，否则模拟器无法发起网络请求。

五、其他排查点 #

• 关闭本地防火墙或添加端口例外：确保.NET Core API使用的端口（如5000）未被防火墙拦截。
• 抓包对比请求：用Charles或Fiddler抓取RN发送的请求，和Swagger中正常请求的头、体内容做对比，定位差异点。

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