如何在Nginx中配置WebSocket代理与CORS?含端口转发及HTTPS需求
我来帮你搞定这个Nginx代理WebSocket和HTTPS的配置问题,直接给你完整的解决方案和关键细节说明:
完整Nginx配置方案
替换/etc/nginx/conf.d/default.conf的内容为以下配置(记得替换MY_URL和SSL证书路径为你的实际信息):
# 处理HTTP请求,重定向到HTTPS server { listen 80; server_name MY_URL; # 替换成你的实际域名/IP return 301 https://$server_name$request_uri; } # HTTPS主配置,包含WebSocket代理和CORS server { listen 443 ssl; server_name MY_URL; # 替换成你的实际域名/IP # SSL证书路径,替换成你自己的证书文件位置 ssl_certificate /path/to/your/fullchain.pem; ssl_certificate_key /path/to/your/privkey.pem; # 优化SSL安全性的可选配置 ssl_protocols TLSv1.2 TLSv1.3; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; # 前端静态资源路径配置(保留你原有的逻辑,补充CORS) location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"; add_header Access-Control-Allow-Headers "Content-Type, Authorization"; # 处理跨域预检OPTIONS请求,直接返回204 if ($request_method = OPTIONS) { return 204; } root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } # WebSocket专属代理配置(对应/api/ws/data路径) location /api/ws/data { # WebSocket需要的CORS特殊配置 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, CONNECT"; add_header Access-Control-Allow-Headers "Content-Type, Authorization, Sec-WebSocket-Key, Sec-WebSocket-Version"; if ($request_method = OPTIONS) { return 204; } # WebSocket代理核心参数,缺一不可 proxy_pass http://localhost:8060; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; 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; # 延长超时时间,避免长连接被Nginx主动断开 proxy_connect_timeout 7d; proxy_send_timeout 7d; proxy_read_timeout 7d; } # 其他API接口的代理配置(如果你的/api/下还有其他非WebSocket请求) location /api/ { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"; add_header Access-Control-Allow-Headers "Content-Type, Authorization"; if ($request_method = OPTIONS) { return 204; } proxy_pass http://localhost:8060; 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; } }
关键配置说明
- HTTPS强制跳转:把所有80端口的HTTP请求自动重定向到HTTPS,确保用户只能通过安全协议访问。
- WebSocket代理核心:
proxy_http_version 1.1:WebSocket依赖HTTP/1.1的Upgrade机制,必须开启这个参数。Upgrade和Connection头:告诉Nginx将请求升级为WebSocket连接,这是实现WebSocket代理的关键。- 超长超时设置:默认Nginx代理超时很短,设置7天超时可以避免长时间在线的WebSocket连接被无故断开。
- CORS配置细节:
- WebSocket需要额外允许
CONNECT方法,以及Sec-WebSocket-Key、Sec-WebSocket-Version这些专属请求头。 - 专门处理
OPTIONS预检请求,直接返回204,避免跨域请求被浏览器拦截。
- WebSocket需要额外允许
配置验证与重载
配置完成后,先检查语法是否正确:
sudo nginx -t
如果输出test is successful,就可以重载Nginx使配置生效:
sudo systemctl reload nginx
注意事项
- 如果你还没有SSL证书,可以用Let's Encrypt的
certbot工具免费获取,它还能自动帮你配置Nginx的SSL。 - 生产环境不建议把
Access-Control-Allow-Origin设为*,最好替换成你实际的前端域名,比如https://your-frontend.com,提升安全性。 - 确保Tomcat的WebSocket服务确实监听在8060端口,并且没有防火墙拦截Nginx到Tomcat的8060端口连接。
内容的提问来源于stack exchange,提问作者southouse




