首页 > 文章 > 前端

React对接Node后端API完整教程

时间：2025-11-07 12:37:45 392浏览收藏

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《React对接Node后端API全流程详解》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

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 (
    
      <h2>用户列表</h2>