解决 Node.js 托管 React 静态资源的跨域问题
在 Node.js 项目中托管 React 打包后的静态资源时，可能会遇到跨域问题（CORS）。以下是几种解决方案：
1. 使用 Express 中间件设置 CORS 头
const express = require('express');
const path = require('path');
const app = express();// 静态资源目录
app.use(express.static(path.join(__dirname, 'build')));// 设置 CORS 头
app.use((req, res, next) => {res.header('Access-Control-Allow-Origin', '*');res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');next();
});// 处理 React 路由
app.get('*', (req, res) => {res.sendFile(path.join(__dirname, 'build', 'index.html'));
});const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {console.log(`Server is running on port ${PORT}`);
});
2. 使用 cors 中间件（推荐）
npm install cors
const express = require('express');
const cors = require('cors');
const path = require('path');
const app = express();// 使用 cors 中间件
app.use(cors()); // 允许所有来源// 或者更精确的控制
/*
app.use(cors({origin: ['http://your-frontend-domain.com', 'http://localhost:3000'],methods: ['GET', 'POST', 'PUT', 'DELETE'],allowedHeaders: ['Content-Type', 'Authorization']
}));
*/// 静态资源目录
app.use(express.static(path.join(__dirname, 'build')));// 处理 React 路由
app.get('*', (req, res) => {res.sendFile(path.join(__dirname, 'build', 'index.html'));
});const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {console.log(`Server is running on port ${PORT}`);
});
3. 代理服务器方案（适用于 API 请求）
如果前端需要访问其他域的后端 API，可以设置代理：
const { createProxyMiddleware } = require('http-proxy-middleware');// 在 Express 中设置代理
app.use('/api', createProxyMiddleware({target: 'http://your-api-server.com',changeOrigin: true,pathRewrite: {'^/api': ''}
}));
4. 配置 React 的代理（开发环境）
在开发环境中，可以在 package.json 中配置代理：
{"proxy": "http://localhost:3001"
}
或者在 src/setupProxy.js 中配置：
const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) {app.use('/api',createProxyMiddleware({target: 'http://localhost:3001',changeOrigin: true,}));
};
5. Nginx 反向代理配置（生产环境）
如果你使用 Nginx 作为前端服务器，可以这样配置：
server {listen 80;server_name your-domain.com;location / {root /path/to/react/build;try_files $uri /index.html;}location /api {proxy_pass http://your-node-server:3000;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# CORS 设置add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';}
}
6. 处理预检请求 (OPTIONS)
app.options('*', cors()); // 处理所有 OPTIONS 请求
注意事项
- 生产环境中不要使用
Access-Control-Allow-Origin: '*'，应该指定具体的域名 - 对于需要凭证的请求（如 cookies），需要设置
Access-Control-Allow-Credentials: true - 确保响应头中包含请求中发送的自定义头
- 如果使用 HTTPS，确保所有资源也都是 HTTPS，避免混合内容问题
以上方法可以根据你的具体需求组合使用，通常在生产环境中推荐使用 Nginx 反向代理或精确配置的 CORS 中间件方案。