React上传文件到Node.js遇CORS错误及请求缓慢问题求助

一、CORS错误排查与修复 #

1. 修正Apache VirtualHost配置错误 #

你的第二个VirtualHost配置中，SSLCertificateKeyFile路径存在多余空格，这会导致该虚拟主机无法正常加载，请求无法正确代理到Node.js服务，自然无法获取到CORS响应头：

# 错误路径
SSLCertificateKeyFile "/opt/bitnami/apache /conf/timeapp.3f.com.key"

修改为正确路径：

SSLCertificateKeyFile "/opt/bitnami/apache/conf/timeapp.3f.com.key"

修改后重启Apache服务生效：

sudo /opt/bitnami/ctlscript.sh restart apache

2. 解决CORS头冲突问题 #

你手动设置的CORS头中，Access-Control-Allow-Origin: *与Access-Control-Allow-Credentials: true是互斥的，浏览器会直接拒绝这类响应，这是核心问题之一。

方案一：用cors包正确配置

如果前端请求需要携带凭证（如Cookie），必须指定具体的前端域名，不能用通配符：

const cors = require('cors');
const app = express();

// 替换为你的React应用实际域名
const corsOptions = {
  origin: 'https://timesheet.3f.com',
  credentials: true,
  allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept'],
  methods: ['GET', 'POST', 'DELETE', 'PUT', 'OPTIONS']
};

// CORS中间件必须放在所有路由和其他中间件之前
app.use(cors(corsOptions));
app.use(bodyParser.json());
// 后续挂载你的业务路由

方案二：手动处理CORS（不推荐，易出错）

若坚持手动设置，需单独处理OPTIONS预检请求并修正Origin：

app.use((request, response, next) => {
  // 替换为你的前端域名，也可动态读取请求头的Origin做判断
  const allowedOrigin = 'https://timesheet.3f.com';
  response.header("Access-Control-Allow-Origin", allowedOrigin);
  response.header("Access-Control-Allow-Credentials", "true");
  response.header(
    "Access-Control-Allow-Methods",
    "GET,POST,DELETE,PUT,OPTIONS"
  );
  response.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );

  // 直接响应OPTIONS预检请求，无需走后续路由
  if (request.method === 'OPTIONS') {
    return response.sendStatus(200);
  }
  next();
});
// 此中间件必须放在express.static、路由等所有中间件之前

3. 确认中间件顺序 #

无论用哪种方式，CORS中间件必须优先于所有路由、express.static、bodyParser等中间件加载，否则请求到达业务逻辑时还未设置CORS头，依然会报错。

二、请求缓慢问题排查与优化 #

1. 检查服务器资源 #

AWS Lightsail基础实例（如1GB内存）可能存在资源不足的情况，导致Node.js或Apache运行卡顿。可通过以下命令查看资源占用：

# 查看CPU、内存占用
top
# 查看磁盘IO状态
iostat

若资源不足，建议升级实例规格。

2. 优化文件传输方式 #

Node.js传输文件时，避免一次性将文件读取到内存，改用流式传输降低内存占用：

const fs = require('fs');
const path = require('path');

app.get('/download/:filename', (req, res) => {
  const filePath = path.join(__dirname, 'public', req.params.filename);
  // 创建可读流直接pipe到响应对象
  const fileStream = fs.createReadStream(filePath);
  fileStream.pipe(res);
});

3. 优化Apache代理配置 #

在ProxyPass的VirtualHost中添加以下配置，开启长连接与压缩，提升传输效率：

<VirtualHost *:443>
  ServerName timeapp.3f.com
  SSLEngine on
  ProxyPass / http://localhost:3004/
  ProxyPassReverse / http://localhost:3004/
  
  # 开启长连接与Cookie域名转换
  ProxyPreserveHost On
  ProxyPassReverseCookieDomain localhost timeapp.3f.com
  
  # 启用Gzip压缩（排除图片类已压缩资源）
  SetOutputFilter DEFLATE
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
  
  # 修正后的证书路径
  SSLCertificateFile "/opt/bitnami/apache/conf/timeapp.3f.com.crt"
  SSLCertificateKeyFile "/opt/bitnami/apache/conf/timeapp.3f.com.key"
</VirtualHost>

4. 优化SSL配置 #

SSL握手耗时过长也会导致请求缓慢，可在Apache中启用SSL会话复用：

# 在VirtualHost或全局配置中添加
SSLSessionCache "shmcb:/opt/bitnami/apache/logs/ssl_scache(512000)"
SSLSessionCacheTimeout 300

内容的提问来源于stack exchange，提问作者Reem.H