使用Flask服務靜態資源 - 運行同源策略

Question

我在爲Phaser正在處理的小遊戲提供靜態文件（圖像資產等）時遇到問題。我在服務器（和客戶端的socket.io）上使用flask-socketio進行網絡連接，這就是爲什麼我試圖在Flask下工作的原因。據我所知，我必須使用Flask來提供靜態資源，否則我會遇到Same-origin policy的問題。

事實上，我試着用nginx的不同端口上提供服務的資產，但我在瀏覽器控制檯（Safari在這種情況下）得到這個消息：SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

我看着就如何爲靜態文件的瓶文檔中並且它說使用「​​url_for」。但是，它只適用於HTML模板文件。我試圖使用相位引擎，像這樣（只是舉例）來加載我的javascript代碼中的靜態資源：

this.load.image('player', 'assets/player.png’); //this.load.image('player’, url); 

在那裏我可以沒有明顯的使用「url_for」，因爲它不是一個模板文件，但JavaScript的碼。

所以我的問題是，我如何服務我的靜態資源，以便我不違反同源策略？

1. 有沒有服務於瓶靜態資源除了使用「url_for」另一種安全的方式？
2. 或者我應該使用nginx作爲反向代理？在燒瓶socketio文檔，我發現這個nginx的配置片段：Flask-SocketIO documentation（請向下滾動到它說：「使用nginx的一個WebSocket的反向代理「）

關於＃2，我不太明白如果我應該做＃2，如果Flask正在監聽5000端口，有人可以好好解釋一下如何配置nginx嗎？在那段代碼中，我可以在文件系統中配置我的靜態資源的路徑嗎？ javascript代碼，我用什麼url路徑來引用資源？

Answer 1

通常，在「主」端口上設置Nginx（或其他一般網絡服務器），然後將其配置爲將某些請求轉發到您的應用程序服務器（在這種情況下，Flask）在客戶端瀏覽器不可見/未知的輔助端口上。 Flask會將結果提供給Nginx，Nginx會將結果轉發給用戶。

這叫做reverse-proxy，而Nginx是widely considered這個設置的不錯選擇。這樣，所有文件都由Nginx提供給客戶端，所以客戶端不會注意到其中的一些實際來自應用服務器。由於它將您的web應用程序（某種程度上）與客戶端隔離開來並允許其節省資源，因此從架構的角度來看，這是很好的。通過不提供靜態文件以及讓Nginx緩存一些web應用程序的結果。

如果您正在開發，這可能看起來像很多開銷;但對於生產來說，它更有意義。但是，讓您的開發環境儘可能模仿您的產品環境是一個不錯的主意。