React Native fetch getting an Empty array when making POST request to Laravel Api

Question

I am working on a project for my self learning that has laravel in the backend and running react native in the front end. I have implemented the login and register screen for my apps. Now I am trying to connect it to my laravel server through its api routes. I was first having CORS issue so I solved it by making a new middleware and editing the kernel.php file as stated in this thread.

CORS Issue with React app and Laravel API

Now I tried to run some tests first with get request my submit function in react is

handleSubmit = async() => {
const email  = this.state.email
const pass = this.state.password

const proxyurl = "https://cors-anywhere.herokuapp.com/";
/*TEST FOR GET REQUEST */
let response = await fetch(`http://mobileprediction/api/user?email=${email}&pass=${pass}`, {
  headers: {
     "Content-Type" : "application/json",
     "Accept" : "application/json"
   },

})


let result = await response.json()
console.log(result)
}

and my api.php file in the routes of laravel was

Route::get("/user", function (Request $request) {
  return $request;
});

and it gave the desired output, but then when I tested the same way with a post request I am getting an empty array no matter what and I am unable to figure out what the problem is

the handlesubmit function in my react native app is

handleSubmit = async() => {
const email  = this.state.email
const pass = this.state.password


/*TEST FOR POST REQUEST */
 let response = await fetch(`http://mobileprediction/api/user`, {
   method: "POST",
   header : {
     "Content-Type" : "application/json",
     "Accept" : "application/json"
   },
   body : JSON.stringify({
     emailid : email,
     password : pass
   }),
 })

let result = await response.json()
console.log(result)
}

and api.php file in laravel is

Route::get("/user", function (Request $request) {
  return $request;
});

Route::post("/user", function(Request $request) {
  return $request;
});

sedhossein · Answer 1 · 2020-02-23T16:21:13.180

0

I think you write your routes in web.php, for your API could write the endpoints in api.php.

Try to comment VerifyCsrfToken middleware in app/Http/Kenrel.php. it has security issue, but you can do it in your learning steps.

[ https://laravel.com/docs/6.x/routing ] [search CSRF in this link]

Any routes pointing to POST, PUT, or DELETE routes that are defined in the web routes file should include a CSRF token field.

edited Feb 23 '20 at 16:21

answered Feb 23 '20 at 15:56

sedhossein

21
5

already tried adding the route in VerifyCsrfToken middleware, no use. And i think for a mobile app one would need the api.php to authenticate and then accept post requests. – Furrukh Jamal Feb 23 '20 at 17:18
@FurrukhJamal adding the routes in VerifyCsrfToken middleware isn,t my answer. i said comment/delete this middleware if your routes is in routes/web.php. or you can have your routes in routes/api.web (better way). in web.php laravel has CSRF issue – sedhossein Feb 23 '20 at 19:08
tried that too, even shifted my post loogic to web.php but still getting an empty array as a response – Furrukh Jamal Feb 24 '20 at 06:30

score 0 · Accepted Answer · answered Feb 28 '20 at 05:03

So what I understood is that from the fetch request in react native its not sending just the inputs but rather a page with a body that has json formatted key values. So I cant access data in my server as

$request->param

or with

request("param")

you could get the json formatted string with

$request->json()->all()

but still I couldnt get to the individual values

for me what was working is to get all the contents and then access the values with

$postInput = file_get_contents('php://input');
   $data = json_decode($postInput, true);
   return ["email" => $data["emailid"] ];

React Native fetch getting an Empty array when making POST request to Laravel Api

2 Answers2