为何API参数在Postman中正常，在React Native中无法传递？

问题根源 #

你的问题核心有两点：

1. 参数位置不匹配：Sanic API从URL查询串（request.args）读取参数，但React Native将参数放在POST请求的JSON体中，两者读取位置不同，导致API拿不到参数。
2. 路由方法未明确：默认@app.route仅支持GET请求，虽然Postman的POST请求因参数在URL中意外生效，但规范上需要明确指定支持POST方法。

解决方案 #

第一步：修改Sanic API，适配POST请求体参数 #

更新API代码，使其既能处理URL查询参数，也能读取POST请求的JSON体，同时明确允许POST方法：

from sanic import Sanic
from sanic.response import json

app = Sanic(name="APIbuilding")
ssl = {
    "cert": "/home/ec2-user/keys/fullchain.pem",
    "key": "/home/ec2-user/keys/privkey.pem",
}

# 明确指定支持GET、POST、OPTIONS（处理跨域预请求）
@app.route('/loginRequest', methods=['GET', 'POST', 'OPTIONS'])
async def confirm(request):
    # 优先从POST请求体获取参数，无则从URL查询串读取
    if request.method == 'POST' and request.json:
        email = request.json.get("email")
        password = request.json.get("password")
    else:
        email = request.args.get("email")
        password = request.args.get("password")
    
    # 基础参数校验，避免空值报错
    if not email or not password:
        return json({'error': '缺少必要参数'}, status=400)
    
    return json({'hello': 'world'}, headers={
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type"
    })

if __name__ == '__main__':
    app.run(host='123.456.789.875', port=8443, ssl=ssl)

第二步：修正React Native的Fetch请求代码 #

确保请求体被正确序列化为JSON字符串，同时添加调试日志和错误处理：

import React from 'react';
import { Button, View, Alert } from 'react-native';

const App = () => {
  const postToApi = async () => {
    try {
      const response = await fetch('https://www.example.com/loginRequest/', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
        },
        // 必须用JSON.stringify将对象转为字符串格式
        body: JSON.stringify({
          "email": "example@mail.com",
          "password": "password"
        })
      });

      const result = await response.json();
      console.log('API响应:', result);
      Alert.alert('请求成功', JSON.stringify(result));
    } catch (error) {
      console.error('请求失败:', error);
      Alert.alert('错误', '请求API失败，请检查网络或配置');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Button
        onPress={postToApi}
        title="POST to API"
      />
    </View>
  );
}

export default App;

额外注意事项 #

• CORS规范：生产环境建议使用Sanic官方的sanic-cors扩展替代手动设置头，避免跨域预请求（OPTIONS）失败。
• SSL证书信任：Android模拟器可能需要手动导入Let's Encrypt证书，调试阶段可临时开启android:usesCleartextTraffic="true"（生产环境禁用）。
• 参数校验：建议在API中添加更严格的参数格式校验，提升接口稳定性。

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