如何正确执行从 react-native 到 express.js 和 mySQL 后端的 POST 请求

Question

I created an express.js backend with mySql database as suggested by these series of tutorial first part here and second part here . Tested all the routes using Postman and already works fine.

Then, using react-native, i tried a simple Get request to fetch data from a table in the database:

<Button title='Test MySQL Connection' 
   onPress = {()=>{
     fetch('http://my_laptop_IP:3000/users')
     .then(response => response.json())
     .then(users => alert(users))}}
 />

This easily works fine.

However, when i tried to insert a row in the table using Post, it failed:

<Button title='Test MySQL Connection' 
   onPress={()=>{    
     fetch('http://my_laptop_IP:3000/users', {
       method: 'POST',
       headers: {       
         Accept: 'application/x-www-form-urlencoded',
         'Content-Type': 'application/x-www-form-urlencoded',
       },
       body: JSON.stringify({
         first_name:'Cell',
         last_name: 'First_form',
       })
     })
     .then((response) => response.json())
     .then((response) => {
        alert(response);
      })
     .catch((error) => alert('Error ' + error));
    }}
 />

Error screenshot for the express backend as follows:

And this is displayed in my virtual device emulator:

have tried to change the header part of the fetch request like this:

headers: {
   Accept: 'application/json',
   'Content-Type': 'application/json',
},

still no luck..

Answer 1

If you are passing JSON as request body you can use

 fetch("http://localhost:3000/users", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ first_name: "Cell", last_name: "First_form" }) }).then(response => response.json()).then(response => { console.log(response) }).catch(error => alert("Error " + error))

Also you might need to add cors module to your server.js

 var express = require("express"); var cors = require('cors'); app = express(), port = process.env.PORT || 3000, bodyParser = require("body-parser"), controller = require("./controller"); app.use(cors()); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); var routes = require("./routes"); routes(app); app.listen(port); console.log("Learn Node JS With Kiddy, RESTful API server started on: " + port);