版更NestJs,解決socketIO Access to XMLHttpRequest has been blocked by CORS policy

前言

Nest.Js 8 於7/7正式釋出,也同步把許多外部套件更新上去
若有使用到websocket的,應該比較有感
socket io 滿早之前就釋出3、4版,但受限於Nest.Js 7 仍使用2
若僅更新前端,會導致無法連接
現在Nest.Js 8 釋出,就可以一併把前後端的socket io直接拉到最新版本!

前後端分離,出現Access to XMLHttpRequest has been blocked by CORS policy

更新後,在前後端分離的架構下,會出現此錯誤訊息
但照官方的寫法,補上transports參數,仍然不行
@WebSocketGateway(3001, { transports: ['websocket'] }) <= 仍無法連接

最後在stack overflow東拼西湊
把所有參數都設定上去後,就可以解決cors policy問題了!

1
@WebSocketGateway(3001, { transports: ['websocket', 'polling', 'flashsocket'], cors: { origin: '*'} })

參考資料

stack overflow / Socket IO error “Access to XMLHttpRequest has been blocked by CORS policy”
Nest.Js / migration guide
Nest.Js 作者 blog / Announcing NestJS 8: What’s New ?