React前端怎么与Node后端对接_React前端调用Node后端API完整流程-js教程-PHP中文网

React前端怎么与Node后端对接_React前端调用Node后端API完整流程

絕刀狂花

发布： 2025-11-09 21:59:02

原创

335人浏览过

React前端与Node后端通过HTTP请求实现数据交互，1. Node使用Express提供RESTful API，需启动服务并暴露接口；2. React用axios调用API，发送GET/POST请求获取或提交数据；3. 配置cors中间件解决跨域问题；4. 可在React中设置proxy代理简化请求路径；5. 完善错误处理、加载状态及拦截器提升用户体验，确保接口连通性与稳定性。

react前端怎么与node后端对接_react前端调用node后端api完整流程

React前端与Node后端对接，本质是通过HTTP请求实现前后端数据交互。只要后端提供标准的RESTful或GraphQL API，前端就能调用。以下是完整的对接流程，从环境准备到实际调用，一步步说明。

1. 确保Node后端提供可访问的API接口

Node.js后端通常使用Express框架搭建服务。你需要确认后端已经启动，并暴露了可用的API端点。

示例：一个简单的Node + Express后端API

安装依赖：

npm install express cors

登录后复制

创建 server.js：

立即学习“前端免费学习笔记（深入）”；

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

app.use(cors()); // 允许跨域请求
app.use(express.json());

// 模拟数据接口
app.get('/api/users', (req, res) => {
  res.json({ users: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] });
});

app.post('/api/users', (req, res) => {
  const newUser = req.body;
  res.status(201).json({ message: '用户创建成功', user: newUser });
});

app.listen(5000, () => {
  console.log('Node服务器运行在 http://localhost:5000');
});

登录后复制

启动后端：

node server.js

登录后复制

此时，API地址为：http://localhost:5000/api/users

2. React前端发起请求调用API

React项目通常使用 fetch 或 axios 发送HTTP请求。下面以 axios 为例（推荐，更简洁）。

安装 axios：

npm install axios

登录后复制

在React组件中调用API：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function UserList() {
  const [users, setUsers] = useState([]);

  // 获取用户列表
  useEffect(() => {
    axios.get('http://localhost:5000/api/users')
      .then(response => {
        setUsers(response.data.users);
      })
      .catch(error => {
        console.error('请求失败:', error);
      });
  }, []);

  // 提交新用户
  const addUser = () => {
    const userData = { name: 'Charlie' };
    axios.post('http://localhost:5000/api/users', userData)
      .then(response => {
        alert(response.data.message);
      })
      .catch(error => {
        console.error('提交失败:', error);
      });
  };

  return (
    <div>
      <h2>用户列表</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <button onClick={addUser}>添加用户</button>
    </div>
  );
}

export default UserList;

登录后复制