如何将React JS与Node JS对接实现登录注册表单数据提交至后端

1. 后端CORS配置（解决跨域问题） #

CORS的作用是解决跨域请求拦截问题：由于前端运行在3000端口、后端运行在4000端口，端口不同属于跨域请求，浏览器默认会拦截未被后端许可的跨域请求，CORS就是用来配置后端允许访问的请求来源。
首先安装cors依赖：
npm install cors
在Express入口文件中添加配置，开发阶段可以直接放开所有来源，生产环境建议严格限定为前端域名：

const express = require('express')
const cors = require('cors')
const app = express()

// 必须放在路由注册之前，且要开启express解析json请求体的中间件
app.use(cors()) // 开发环境临时放开所有跨域请求
// 生产环境严格配置示例
// app.use(cors({
//   origin: 'http://localhost:3000', // 仅允许3000端口的请求访问
//   credentials: true // 如果后续要携带JWT头或者Cookie需要开启该项
// }))
app.use(express.json()) // 必须配置，否则后端拿不到前端传的json格式参数

// 这里是你原来的注册、登录等路由配置
app.post('/api/register', (req, res) => {
  // 原有注册逻辑不变
})

app.listen(4000, () => console.log('后端服务运行在4000端口'))

配置完成后必须重启后端服务生效。

2. 前端Axios配置 #

Axios是封装了原生HTTP请求的工具库，简化请求、响应的处理逻辑，不用手动处理兼容和参数格式化。
首先前端安装axios依赖：
npm install axios
建议封装全局请求实例，方便统一配置前缀、超时时间、拦截逻辑，在src目录下新建utils/request.js：

import axios from 'axios'

const request = axios.create({
  baseURL: 'http://localhost:4000/api', // 统一配置后端接口前缀，后续请求不用重复写全路径
  timeout: 5000 // 超时时间，超过5秒自动中断请求
})

// 后续可以在这里加请求拦截器，统一给请求头加JWT认证信息，或者加响应拦截器统一处理错误
export default request

3. React表单提交逻辑实现 #

以受控组件的表单为例，完整的注册页面示例如下：

import { useState } from 'react'
import request from '../utils/request'
// 如果用react-router跳转可以引入useNavigate
// import { useNavigate } from 'react-router-dom'

function RegisterPage() {
  // const navigate = useNavigate()
  const [formData, setFormData] = useState({
    username: '',
    password: '',
    confirmPassword: ''
  })

  // 统一处理输入框内容变化
  const handleInputChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({...prev, [name]: value}))
  }

  // 表单提交逻辑
  const handleSubmit = async (e) => {
    e.preventDefault() // 阻止表单默认跳转刷新行为
    // 前端基础校验
    if (formData.password !== formData.confirmPassword) {
      alert('两次输入的密码不一致')
      return
    }
    try {
      // 发送注册请求，参数字段名要和后端约定的保持一致
      const res = await request.post('/register', {
        username: formData.username,
        password: formData.password
      })
      // 注册成功后的逻辑：提示成功、跳转到登录页、清空表单
      alert('注册成功，请登录')
      // navigate('/login')
    } catch (err) {
      // 注册失败处理，打印后端返回的错误信息
      console.error('注册失败', err.response?.data || err.message)
      alert(err.response?.data?.msg || '注册失败，请重试')
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名：</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleInputChange}
          required
        />
      </div>
      <div>
        <label>密码：</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleInputChange}
          required
        />
      </div>
      <div>
        <label>确认密码：</label>
        <input
          type="password"
          name="confirmPassword"
          value={formData.confirmPassword}
          onChange={handleInputChange}
          required
        />
      </div>
      <button type="submit">提交注册</button>
    </form>
  )
}

export default RegisterPage

4. 异常排查步骤 #

如果还是请求失败，按以下顺序排查：

• 先用Postman/ApiFox调用后端注册接口，确认接口本身逻辑正常，参数、路径符合预期
• 打开浏览器控制台「网络」面板，查看请求状态码：
  • 报CORS跨域错误：回到第一步检查后端CORS配置，确认配置后已经重启后端服务
  • 404状态码：请求路径错误，检查baseURL和post方法里的接口路径是否和后端一致
  • 400状态码：参数错误，检查传给后端的字段名、格式是否和后端要求匹配
  • 500状态码：后端服务报错，查看后端控制台的错误日志定位问题

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