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

Question

我在 Phaser 中为我正在开发的小游戏提供静态文件(图像 Assets 等)时遇到问题.我正在使用 flask-socketio在服务器(和客户端的 socket.io)上用于网络，这就是为什么我试图在 Flask 下让它工作。据我所知，我必须使用 Flask 来为静态资源提供服务，否则我会遇到 Same-origin policy 的问题。 .

实际上，我尝试在不同端口上使用 nginx 提供 Assets ，但我在浏览器控制台(在本例中为 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 代码。

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

除了使用“url_for”之外，还有另一种安全的方式在 Flask 中提供静态资源吗？

或者我应该使用 nginx 作为反向代理？在flask-socketio 文档中，我找到了这个nginx 配置片段:Flask-SocketIO documentation (请向下滚动到“使用 nginx 作为 WebSocket 反向代理”的位置)

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

Answer 1

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

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

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

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