React Native中如何获取响应头？409错误场景下字段返回null

1. 先排查服务器CORS配置问题 #

NodeJS服务器必须显式允许自定义响应头x-exit被前端访问，否则浏览器/React Native的fetch会自动隐藏这类非标准头。以Express框架为例，需要在接口响应中添加：

res.header('Access-Control-Expose-Headers', 'x-exit');

如果有多个自定义头需要暴露，用逗号分隔即可，比如'x-exit, x-custom-code'。

2. 调整响应头的获取逻辑 #

HTTP头本身不区分大小写，但部分环境下headers.get()方法可能对大小写敏感，你可以尝试：

• 用标准的首字母大写格式获取：response.headers.get('X-Exit')
• 遍历所有响应头，确认实际返回的头名称（方便排查是否存在拼写或大小写差异）：

  for (const [key, value] of response.headers.entries()) {
    console.log(`${key}: ${value}`);
  }
  

3. 尝试解析响应体文本 #

有时候服务器会把错误信息同时放在响应体中，即使你在DevTools里看到了响应头。可以用response.text()替代json()来获取内容：

else if (response.status == 409) {
  let errorMessage = response.headers.get('X-Exit') || response.headers.get('x-exit');
  
  // 如果头里拿不到，尝试解析响应体
  if (!errorMessage) {
    try {
      const bodyContent = await response.text();
      errorMessage = bodyContent;
      // 如果响应体是JSON格式，也可以转成对象提取：
      // const errorData = JSON.parse(bodyContent);
      // errorMessage = errorData.message;
    } catch (e) {
      console.error('解析响应体失败:', e);
    }
  }

  if (errorMessage?.toLowerCase() === ERROR_MESSAGES.INVALID_VERSION) {
    throw new Error(ERROR_MESSAGES.INVALID_VERSION);
  }
  throw Error(`There was a problem when trying to log in user: ${emailAddress}. Please, try again later.`);
}

4. 简化fetch请求的构造方式 #

你当前的fetch调用把Request实例和额外配置分开传递，可能导致部分参数被覆盖。可以简化成更常规的写法：

await fetch(`${Constants?.manifest?.extra?.hostname}/ext/external-users`, {
  method: 'POST',
  body: formData,
  headers: headers,
}).then(async response => {
  // ... 后续处理逻辑
});

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