React Native中Fetch POST请求报错：ReadableNativeMap无法转为String

我之前也碰到过几乎一模一样的问题，结合你描述的「本地POST正常、线上POST报错，GET请求无异常」的情况，这个com.facebook.react.bridge.ReadableNativeMap cannot be cast to java.lang.String错误，大概率是后端输出格式不规范或者请求配置/错误处理不当导致的，下面给你逐一排查方向和解决方案：

1. 先排查PHP后端的输出问题（最常见原因） #

本地开发环境通常会关闭PHP的错误显示，而线上服务器可能默认开启了display_errors，当POST请求触发PHP的Notice/Warning（比如未定义变量、数组索引不存在）时，后端会在JSON输出前额外输出错误警告文本，导致返回的内容不是纯JSON格式——React Native尝试解析非JSON响应时就会出错，进而抛出类型转换异常。

解决方法： #

确保PHP端输出纯JSON内容，没有任何多余空格、警告、HTML：

// 关闭错误输出，避免干扰JSON格式
error_reporting(0);
ini_set('display_errors', 0);

// 设置正确的响应头
header('Content-Type: application/json');

// 处理POST请求逻辑
$response_data = ['code' => 200, 'msg' => 'success', 'data' => []];

// 输出JSON并终止脚本，防止后续多余输出
echo json_encode($response_data);
exit;

另外要注意：如果你的PHP脚本包含其他文件，要确保那些文件也没有多余的echo/print输出（比如调试用的日志）。

2. 检查Fetch POST请求的配置是否正确 #

你提到的代码片段只写了method: 'POS...'，大概率是请求头或请求体格式和PHP后端预期不匹配：

• 如果PHP用json_decode(file_get_contents('php://input'))接收JSON格式数据，React Native的请求要这么写：

fetch('http://xxx/react_test1', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json', // 必须设置这个头
  },
  body: JSON.stringify({
    username: 'test',
    password: '123456'
  })
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => {
  // 这里注意别直接拼接error对象，下面会说
  console.error('Error message:', error.message);
});

• 如果PHP用$_POST接收表单格式数据，请求要改成：

fetch('http://xxx/react_test1', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: new URLSearchParams({
    username: 'test',
    password: '123456'
  })
})

3. 修正错误捕获的方式 #

你看到的ReadableNativeMap cannot be cast to java.lang.String错误，很多时候是错误处理时把Error对象当成字符串拼接导致的——比如直接写console.log('ERROR : ' + error)，这时候React Native会尝试把包含Map结构的Error对象转成字符串，就会抛出这个异常。

正确的错误处理方式： #

.catch(error => {
  // 打印错误的具体属性，而不是直接拼接对象
  console.error('Error code:', error.code);
  console.error('Error message:', error.message);
  // 如果需要完整错误信息，用JSON.stringify
  console.error('Full error:', JSON.stringify(error));
});

4. 排查线上服务器的CORS配置 #

虽然本地正常，但线上服务器可能没配置跨域（CORS）规则，导致Fetch请求被浏览器/React Native拦截（不过这个错误提示不太典型，但也可以排查）：
在PHP脚本开头添加CORS头：

// 生产环境建议替换成你的React Native应用域名，不要用*
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

// 处理预检OPTIONS请求
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
  exit(0);
}

总结排查顺序 #

1. 先确认线上PHP后端返回的内容是纯JSON（可以用Postman直接请求线上接口，看响应体）
2. 检查Fetch请求的Content-Type和请求体格式是否和后端匹配
3. 修正错误捕获的代码，避免直接拼接Error对象
4. 最后排查CORS配置

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