Maven项目中通过REST API实现前后端对接的技术疑问

一、通信链接的配置位置 #

前端侧 #

把后端API的基础地址统一配置在环境变量文件（比如.env、.env.development）里，避免硬编码，方便不同环境切换：

# React项目示例 .env.development
REACT_APP_API_BASE_URL=http://localhost:3001/api

也可以在专门的API封装模块（比如src/api/client.js）里统一管理请求前缀，比如用axios封装时直接引入环境变量：

import axios from 'axios';
const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL,
  headers: { 'Content-Type': 'application/json' }
});
export default apiClient;

后端侧 #

核心是配置跨域（CORS）规则，允许前端域名的请求，比如Node.js/Express项目用cors中间件：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000', // 允许的前端地址
  credentials: true // 如果需要携带Cookie的话开启
}));

二、验证通信是否建立 #

• 直接发测试请求：在浏览器控制台里执行原生fetch请求，看返回结果：

fetch('http://localhost:3001/api/health')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('连接失败:', err));

或者用Postman/Insomnia直接调用后端接口，检查响应状态码（200表示连通正常）。

• 后端加健康检查接口：专门写一个无业务逻辑的接口，用来验证连通性：

// 后端示例
app.get('/api/health', (req, res) => {
  res.status(200).json({ status: 'ok', message: '前后端通信正常' });
});

• 浏览器DevTools排查：打开F12的Network标签，发起请求后查看请求状态；如果有跨域问题，Console标签会直接抛出CORS错误提示。

三、前端展示后端数据的步骤 #

1. 发起API请求获取数据 #

以React组件为例，用useEffect钩子在页面加载时请求数据，并存到组件状态里：

import { useState, useEffect } from 'react';
import apiClient from './api/client';

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

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await apiClient.get('/users');
        setUsers(response.data);
      } catch (err) {
        console.error('获取用户数据失败:', err);
      } finally {
        setLoading(false);
      }
    };
    fetchUsers();
  }, []);

2. 绑定数据到UI渲染 #

把状态里的数据直接渲染到页面上，比如遍历生成列表：

if (loading) return <div>加载中...</div>;

  return (
    <div>
      <h2>用户列表</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default UserList;

四、前后端链接的建立时机 #

REST API基于HTTP协议，没有提前建立长期链接的概念：

• 当前端触发请求（比如页面加载、用户点击按钮）时，浏览器才会和后端服务器建立临时TCP连接，发送HTTP请求；
• 后端返回响应后，连接会被关闭（或根据HTTP/2协议复用）；
• 只有WebSocket这类长连接方案才会提前建立持续的链接，但REST API是按需发起短连接，每次请求都是独立的通信过程。

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