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

Question

我按照本系列教程 first part here 的建议，使用 mySql 数据库创建了一个express.js 后端。和 second part here 。使用 Postman 测试了所有路由并且已经工作正常。

然后，使用react-native，我尝试了一个简单的获取请求来从数据库中的表中获取数据:

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

这很容易就能正常工作。

但是，当我尝试使用 Post 在表中插入一行时，它失败了:

<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));
    }}
 />

express后端错误截图如下:

这显示在我的虚拟设备模拟器中:

尝试更改获取请求的 header 部分，如下所示:

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

还是没有运气..

Answer 1

如果您将 JSON 作为请求正文传递，则可以使用

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))

您可能还需要将 cors 模块添加到您的 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);