使用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应用程序的结果。

如果您正在开发，这可能看起来像很多开销;但对于生产来说，它更有意义。但是，让您的开发环境尽可能模仿您的产品环境是一个不错的主意。