解决 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 请求

注意事项

1. 生产环境中不要使用 Access-Control-Allow-Origin: '*'，应该指定具体的域名
2. 对于需要凭证的请求（如 cookies），需要设置 Access-Control-Allow-Credentials: true
3. 确保响应头中包含请求中发送的自定义头
4. 如果使用 HTTPS，确保所有资源也都是 HTTPS，避免混合内容问题

以上方法可以根据你的具体需求组合使用，通常在生产环境中推荐使用 Nginx 反向代理或精确配置的 CORS 中间件方案。