You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在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;
    }
}
关键配置说明
  1. HTTPS强制跳转:把所有80端口的HTTP请求自动重定向到HTTPS,确保用户只能通过安全协议访问。
  2. WebSocket代理核心
    • proxy_http_version 1.1:WebSocket依赖HTTP/1.1的Upgrade机制,必须开启这个参数。
    • UpgradeConnection头:告诉Nginx将请求升级为WebSocket连接,这是实现WebSocket代理的关键。
    • 超长超时设置:默认Nginx代理超时很短,设置7天超时可以避免长时间在线的WebSocket连接被无故断开。
  3. CORS配置细节
    • WebSocket需要额外允许CONNECT方法,以及Sec-WebSocket-KeySec-WebSocket-Version这些专属请求头。
    • 专门处理OPTIONS预检请求,直接返回204,避免跨域请求被浏览器拦截。
配置验证与重载

配置完成后,先检查语法是否正确:

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

火山引擎 最新活动