react 实现前后端分离
React 实现前后端分离的方法
前后端分离是现代 Web 开发的常见模式，React 作为前端框架，可以很好地与后端解耦。以下是实现前后端分离的关键步骤。
前端项目搭建
使用 Create React App (CRA) 或 Vite 快速初始化 React 项目：
npx create-react-app my-app --template typescript
# 或
npm create vite@latest my-app --template react配置环境变量区分开发和生产环境，在项目根目录创建 .env.development 和 .env.production 文件：
REACT_APP_API_BASE_URL=http://localhost:3001
REACT_APP_API_TIMEOUT=5000后端 API 设计
遵循 RESTful 规范设计接口，或采用 GraphQL 方案。示例 Node.js 路由：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/api/users', (req, res) => {
res.json([{ id: 1, name: 'John' }]);
});
app.listen(3001);前后端通信
使用 Axios 或 Fetch API 进行 HTTP 请求。封装请求拦截器示例：
import axios from 'axios';
const api = axios.create({
baseURL: process.env.REACT_APP_API_BASE_URL,
timeout: process.env.REACT_APP_API_TIMEOUT
});
api.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) config.headers.Authorization = `Bearer ${token}`;
return config;
});跨域解决方案
开发环境下配置代理，在 package.json 或 vite.config.js 中设置：
"proxy": "http://localhost:3001"生产环境通过 Nginx 配置反向代理：
server {
listen 80;
location /api {
proxy_pass http://backend:3001;
}
location / {
root /usr/share/nginx/html;
try_files $uri /index.html;
}
}状态管理
复杂应用建议使用 Redux 或 Context API 管理全局状态。Redux 异步请求示例：
const fetchUsers = createAsyncThunk('users/fetch', async () => {
const response = await api.get('/users');
return response.data;
});部署策略
前端静态文件部署到 CDN 或对象存储，后端部署到云服务器或容器服务。使用 Docker 容器化示例：
# 前端 Dockerfile
FROM nginx:alpine
COPY build /usr/share/nginx/html# 后端 Dockerfile
FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3001
CMD ["node", "server.js"]安全注意事项
实现 JWT 认证机制，前端存储 token 时使用 HttpOnly cookie。后端启用 CORS 白名单：
app.use(cors({
origin: ['https://yourdomain.com'],
credentials: true
}));这种架构下，前端专注于 UI 和用户体验，后端专注于业务逻辑和数据持久化，通过 API 契约明确双方职责边界。
