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
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.
API expects credentials as query parameters, so something like this would work: