如何将React中生成的变量发送到Node.js后端

第一步：React前端（home.jsx）发送请求 #

推荐优先用浏览器原生的fetch API，无需额外安装依赖，也可以根据习惯选择axios。

• 给按钮绑定点击处理函数，将生成的rowObject序列化为JSON后发起POST请求：

// home.jsx 中的按钮点击处理逻辑
const handleSubmit = async () => {
  // 此处rowObject为你已经生成完成的目标JSON对象
  try {
    const response = await fetch('http://你的后端服务地址/post', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(rowObject)
    })
    const result = await response.json()
    if (response.ok) {
      console.log('数据提交成功', result)
      // 此处可自定义提交成功后的提示、页面跳转等逻辑
    } else {
      console.error('提交失败', result)
    }
  } catch (err) {
    console.error('请求发送异常', err)
  }
}

// 按钮绑定事件
<button onClick={handleSubmit}>提交数据</button>

如果选择用axios，先执行npm install axios安装依赖，代码可以更简洁：

import axios from 'axios'

const handleSubmit = async () => {
  try {
    const res = await axios.post('http://你的后端服务地址/post', rowObject)
    console.log('数据提交成功', res.data)
  } catch (err) {
    console.error('提交失败', err)
  }
}

注意：如果前后端服务端口不同，需要在后端配置CORS规则，否则请求会被浏览器拦截。

第二步：后端（post.js）接收数据并存入数据库 #

以下是最常用的Node.js+Express框架的实现示例，其他后端框架逻辑通用。

• 先安装必要依赖：npm install express cors body-parser，再根据你使用的数据库类型安装对应操作依赖，比如MySQL用mysql2、MongoDB用mongoose。
• post.js 代码示例（以MongoDB为例）：

const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const mongoose = require('mongoose')

const app = express()
const port = 3001 // 后端端口不要和前端React的端口冲突

// 配置中间件
app.use(cors()) // 允许跨域请求
app.use(bodyParser.json()) // 解析JSON格式的请求体

// 连接数据库，替换为你自己的数据库地址
mongoose.connect('mongodb://localhost:27017/你的数据库名称')

// 定义数据存储模型，字段需要和rowObject内的字段一一对应
const DataSchema = new mongoose.Schema({
  // 示例：如果rowObject内有name、age字段，就按如下格式配置
  name: String,
  age: Number
  // 把rowObject中所有需要存储的字段都补充到此处
})
const DataModel = mongoose.model('Data', DataSchema)

// 编写POST接口，路由要和前端请求的地址一致
app.post('/post', async (req, res) => {
  try {
    // 前端发送的rowObject会被解析到req.body中
    const newData = new DataModel(req.body)
    await newData.save() // 写入数据库
    res.status(200).json({ code: 200, msg: '存储成功', data: newData })
  } catch (err) {
    res.status(500).json({ code: 500, msg: '存储失败', error: err.message })
  }
})

// 启动后端服务
app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`)
})

• 测试时终端执行node post.js启动后端服务即可。

如果使用其他类型数据库，逻辑不变：接收POST请求的JSON请求体，调用对应数据库的写入接口，返回操作结果即可。

常见问题排查 #

• 跨域报错：确认后端已开启CORS配置，或者前端配置代理转发请求
• 后端拿到的请求体为空：确认后端配置了JSON解析中间件，前端请求头的Content-Type设置为application/json
• 数据库写入失败：检查数据模型字段和rowObject的字段类型、名称是否匹配，数据库连接是否正常

内容的提问来源于stack exchange，提问作者Swift Bae