Why does my API work correctly (specifically, parameters) with Postman, but not with React Native?-CodePudding

My API is a very basic Python script with Sanic, I have a SSL certificate from letsencrypt, and the server is running on an AWS Lightsail instance. Both Postman and my React Native application are running in a separate Windows 11 machine.

Here's the relevant API code:

from os import abort
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",
}

@app.route('/loginRequest')
async def confirm(request):
    email = str(request.args.get("email"))
    password = str(request.args.get("password"))
    return json({'hello': 'world'}, headers={"Access-Control-Allow-Origin": "*","Access-Control-Allow-Methods": "*"})

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

My request in Postman works:

https://www.example.com/loginRequest/[email protected]&password=password

Returns

{
    "hello": "world"
}

And I can see the correct logs in my server:

[2022-10-18 16:22:07  0000] - (sanic.access)[INFO][123.123.123.123:49339]: POST https://www.example.com/loginRequest/[email protected]&password=password  200 30

I can see the parameters sent, and I can read the values in the server. However, I have not been able to replicate this using React Native (or Android Studio, for that matter).

My React Native code is as follows:

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


const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Button
        onPress={() => 
          fetch('https://www.example.com/loginRequest/', {
            method: 'POST',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json'
            },
            body: {
              "email": "[email protected]",
              "password": "password"
            }
          })
        }
        title="POST to API"
      />
    </View>
  );
}

export default App;

On the Android Emulator, I see the correct view, which is a plain button with the text "POST TO API". When I click on it, I see activity in the server. There is a connection. However, it doesn't send the body of the request. The log looks like this:

[2022-10-18 16:31:52  0000] - (sanic.access)[INFO][123.123.123.123:49339]: POST https://www.example.com/loginRequest/  200 30

Note that there are no parameters in the log this time. Also, I get the same result when using JSON stringify to build the body of the fetch request.

CodePudding user response：

API expects credentials as query parameters, so something like this would work:

fetch(`https://www.example.com/loginRequest/?email=${email}&password=${password}`, {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
}

CodePudding user response：

On your backend side, you take params from the URL as far as I understand (https://sanic.dev/en/guide/basics/request.html#parameters). On React Native side you pass another body params. You need to pass your params as a part of the URL or change your backend handler.