iT邦幫忙

2

使用nginx做反向代理沒辦法在網頁前端跑websocket

  • 分享至 

  • xImage

目前的服務是架在GCP上,直接打ip跟port來提供服務

因為ip真的很難記我去申請了一個免費的網域,然後使用nginx來做反向代理

/etc/nginx/conf.d/default.conf 設定

server {
    listen 80;
    listne [::]:80;
    server_name 申請的網址;
    location / {
        proxy_pass http://33.333.333.333:8080;
    }
}

http://33.333.333.333:8080 是我亂打的實際不是這樣

實際去連申請的網址也確實可以連線到服務
但是網頁前端顯示websocket連線失敗

接著我去檢查js的websocket設定

w = new WebSocket(`ws://33.333.333.333:8080/my_endpoint');

如果直接用ip跟port去連是可以連到服務並且websocket是有連線到的
但是使用網址去連沒辦法
可是網址不是已經被反向代理成ip跟port的形式了嗎?
(我有嘗試過把js內的ip跟port改成網域名稱,但是變成兩種方法的websocket都沒連上)

請問是不是我有地方沒設定好或是還有其他需要做的事情?

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
froce
iT邦大師 1 級 ‧ 2020-07-08 20:35:51
server {
    listen 80;
    listne [::]:80;
    server_name 申請的網址;
    location / {
        proxy_pass http://33.333.333.333:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}
 

這樣試試

skycover iT邦新手 4 級 ‧ 2020-07-08 21:24:50 檢舉

剛剛測試了,還是連不上

再補上 /my_endpoint
因該就可以了。

上一個經驗。

skycover iT邦新手 4 級 ‧ 2020-07-09 14:40:47 檢舉

js裡面原本就有/my_endpoint
請問是還有其他位置需要補這段嗎?

1
小碼農米爾
iT邦高手 1 級 ‧ 2020-07-08 20:37:13

可能是 nginx 把 websocket 需要的 header 資訊擋掉了

調整 nginx 設定

server {
    ...
    location / {
        ...
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

可以參考:
Nginx不能轉發帶有websocket功能的專案解決方案
nginx為WebSocket做反向代理,WebSocket伺服器連線302

skycover iT邦新手 4 級 ‧ 2020-07-08 21:24:57 檢舉

剛剛測試了,還是連不上

可以開一下 Chrome 開發視窗
比對一下使用 nginx 和沒使用時 header 的差異
websocket 有沒有順利握手成功

1
黃彥儒
iT邦高手 1 級 ‧ 2020-07-08 20:47:32
skycover iT邦新手 4 級 ‧ 2020-07-08 21:29:03 檢舉

我照著裡面說的還加上了

proxy_set_header Host $host;
proxy_set_header Origin '';

也還是不行,是不是有其他需要設定的?

我要發表回答

立即登入回答