部署Node.js+Express+Peer.js+Socket.io到VPS遇CORS拦截错误求助

1. 确保Express CORS中间件的正确加载顺序 #

Express的cors中间件必须在所有路由、静态资源服务和其他服务初始化前配置，否则无法覆盖所有请求：

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

// 优先配置CORS
app.use(cors({
  origin: '*', // 生产环境建议替换为你的VPS域名
  credentials: true, // 若涉及Cookie或认证需开启
  methods: ['GET', 'POST', 'OPTIONS'] // 覆盖项目用到的所有请求方法
}));

// 再加载其他中间件和路由
app.use(express.json());
app.set('view engine', 'ejs');
// ... 其余业务代码

2. 单独配置Peer.js的CORS规则 #

Peer.js的WebSocket服务独立于Express，默认不会继承Express的CORS配置，需要单独设置：

const { ExpressPeerServer } = require('peer');
const httpServer = require('http').createServer(app);

// 初始化PeerServer时指定CORS
const peerServer = ExpressPeerServer(httpServer, {
  debug: true,
  cors: {
    origin: '*',
    credentials: true
  }
});

app.use('/peerjs', peerServer);

3. 为Socket.io配置独立CORS #

Socket.io同样需要单独配置CORS，不能依赖Express的中间件：

const { Server } = require('socket.io');
const io = new Server(httpServer, {
  cors: {
    origin: '*',
    methods: ['GET', 'POST'],
    credentials: true
  }
});

4. 修正客户端连接地址 #

客户端script.js中必须使用VPS的公网IP或域名，而非localhost：

// 错误（本地测试用）
// const socket = io('http://localhost:3000');
// const peer = new Peer(undefined, { host: 'localhost', port: 3000, path: '/peerjs' });

// 正确（部署环境）
const socket = io('http://你的VPS公网IP:3000'); // 或绑定的域名
const peer = new Peer(undefined, {
  host: '你的VPS公网IP',
  port: 3000,
  path: '/peerjs'
});

5. 检查VPS防火墙与反向代理配置 #

• 确保VPS防火墙开放了项目使用的端口（如3000），允许外部入站连接。
• 若使用Nginx反向代理，需在配置中添加CORS头并处理OPTIONS请求：

  server {
    listen 80;
    server_name 你的域名;
  
    location / {
      proxy_pass http://localhost: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;
      proxy_set_header X-Forwarded-Proto $scheme;
  
      # 配置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';
  
      # 直接响应OPTIONS请求
      if ($request_method = OPTIONS) {
        return 204;
      }
    }
  }
  

内容的提问来源于stack exchange，提问作者Syed Talal Jilani