Chia Yu Pai

Front-End, HTML5, Javascript, CSS3

Facebook oAuth redirect url on reverse proxy with nginx

| Comments

近來 Angular 的流行開始改用 Single Page Application 的架構作為網站基礎
前端為了速度直接採用 nginx 作為靜態檔案 server
後端透過 proxy_pass 的方式以 RegExp 判定特定 URL 達到同網域避開 Same Origin Policy 的問題
但遇到 oAuth 時候必須特別為他客製一條通道
否則在 URL Match Check 失敗會造成無限重導向 302

本來為了介接後端 Server 採用下方 nginx 設定

location ~ ^/api/(.*)$ {
  proxy_pass http://127.0.0.1:3000/$1;
}
# 自動轉換 http://yourdomain.com/api/foo/bar -> http://yourdomain.com:3000/foo/bar

此時為了 oAuth 的 Redirect URL 正確
如果使用 http://yourdomain.com/api/auth/facebook/callback 會被轉換成
http://yourdomain.com/auth/facebook/callback 而造成 URL not match 重新導入
最後就變成 302 無限重導向迴圈

最簡單的解決方式就是直接提供一條通道給 facebook callback 通過

location ~ ^/auth/facebook/callback$ {
  proxy_pass http://127.0.0.1:3000;
}

這樣就能正確的 Matching URL 又不改變本來的 API Route Scope
當然直接採用

location ~ ^/api/auth/facebook/callback$ {
  proxy_pass http://127.0.0.1:3000;
}

放在前面也可以,只是後方 Server 對於 Routing 的判斷就會有多一個 api

Anyway 其實這也不是什麼技術討論
只是被這個問題卡了一個晚上記錄一下
連 passport-facebook 的 source 都看了一遍才找到問題 lol

Comments

comments powered by Disqus