使用 Flask 提供静态资源 - 违反同源策略

Question

我在为我在Phaser 开发的一个小游戏提供静态文件（图像资源等）时遇到问题。我在服务器上使用flask-socketio（和客户端上的socket.io）进行网络连接，这就是为什么我试图让它在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.

我查看了有关如何提供静态文件的 Flask 文档，它说要使用“url_for”。但是，这只适用于 HTML 模板文件。我正在尝试使用 Phaser 引擎在我的 javascript 代码中加载静态资源，如下所示（仅作为示例）：

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

我显然不能使用“url_for”，因为它不是模板文件而是 javascript 代码。

所以我的问题是，我如何为我的静态资源提供服务，以免违反同源政策？

1. 除了使用“url_for”之外，还有另一种在 Flask 中提供静态资源的安全方法吗？
2. 或者我应该使用 nginx 作为反向代理？在 flask-socketio 文档中，我找到了这个 nginx 配置 sn-p：Flask-SocketIO documentation（请向下滚动到它显示“将 nginx 用作 WebSocket 反向代理”的位置）

关于#2，我不太明白它应该如何工作。如果我应该做＃2，如果Flask正在监听端口5000，有人可以解释我应该如何配置nginx吗？我在该 sn-p 的哪个位置配置文件系统上静态资产的路径？在我的 javascript 代码中，我使用什么 url 路径来引用资产？

Answer 1

通常，人们会在“主”端口上设置 Nginx（或其他一些通用 Web 服务器），然后将其配置为将某些请求转发到您的应用程序服务器（在本例中为 Flask）上的辅助端口，该端口是客户端浏览器不可见/未知。 Flask 会将结果提供给 Nginx，然后 Nginx 会将结果转发给用户。

这被称为reverse-proxy，而 Nginx 是widely considered，这是此设置的不错选择。这样，所有文件都由 Nginx 提供给客户端，因此客户端不会注意到其中一些文件实际上来自您的应用程序服务器。

从架构的角度来看这很好，因为它将您的 web 应用程序（在某种程度上）与客户端隔离，并允许它节省资源，例如通过不提供静态文件并让 Nginx 缓存一些 web 应用程序的结果，如果这样做是有意义的。

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