skip to Main Content

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.

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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'
      }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search