react如何和node交互
React 与 Node.js 交互的核心方式
React 作为前端框架，通常通过 HTTP 请求与 Node.js 后端交互。以下是几种常见方法：
使用 Fetch API
Fetch API 是浏览器原生支持的 HTTP 请求工具，无需额外依赖：
fetch('http://your-node-server/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));使用 Axios 库
Axios 是更流行的 HTTP 客户端，提供更简洁的语法和错误处理：
import axios from 'axios';
axios.get('http://your-node-server/api/data')
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));创建自定义 Hook
可以封装数据获取逻辑为可重用 Hook：
import { useState, useEffect } from 'react';
function useApiData(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(data => {
setData(data);
setLoading(false);
});
}, [url]);
return { data, loading };
}Node.js 后端示例
Node.js 端需要设置路由和处理请求：
const express = require('express');
const app = express();
app.get('/api/data', (req, res) => {
res.json({ message: 'Data from Node.js' });
});
app.listen(3001, () => {
console.log('Node server running on port 3001');
});处理 CORS 问题
开发时需要配置 CORS 以允许跨域请求：
const cors = require('cors');
app.use(cors());生产环境部署建议
- 使用 Nginx 或类似工具反向代理 API 请求
- 配置相同的域名和端口避免 CORS
- 实现 JWT 或其他认证机制保护 API
WebSocket 实时通信
对于实时应用，可以建立 WebSocket 连接：
const socket = new WebSocket('ws://your-node-server');
socket.onmessage = (event) => {
console.log('Message from server:', event.data);
};Node.js 端需要 ws 库实现 WebSocket 服务器。
