使用 Flask 提供静态资源 - 运行 违反同源策略
Serving static resources with Flask - running afoul of Same-origin policy
我在为我正在 Phaser. I’m using flask-socketio on the server (and socket.io on the client-side) for networking which is why I’m trying to get this working under Flask. As far as I can tell, I must use Flask to serve the static resources because otherwise I run into the problem of the 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 代码。
所以我的问题是，如何提供静态资源才能不违反同源策略？
- 除了使用‘url_for’之外，还有其他安全的方式在 Flask 中提供静态资源吗？
- 或者我应该使用 nginx 作为 反向代理？在 flask-socketio 文档中，我找到了这个 nginx 配置片段：Flask-SocketIO documentation（请向下滚动到“Using nginx as a WebSocket Reverse Proxy”）
关于#2，我不太明白它应该如何工作。如果我应该做#2，有人可以解释一下如果 Flask 在端口 5000 上侦听我应该如何配置 nginx 吗？我在该片段的何处配置文件系统上我的静态资产的路径？在我的 javascript 代码中，我使用什么 url 路径来引用资产？
通常，人们会在 "main" 端口上设置 Nginx（或其他一些通用 Web 服务器），然后将其配置为将某些请求转发到您的应用程序服务器（在本例中为 Flask）客户端浏览器的辅助端口 invisible/unknown。 Flask 会将结果提供给 Nginx，然后 Nginx 会将结果转发给用户。
这被称为 reverse-proxy, and Nginx is widely considered 此设置的不错选择。这样，所有文件都由 Nginx 提供给客户端，因此客户端不会注意到其中一些文件实际上来自您的应用程序服务器。
从架构的角度来看，这很好，因为它将您的 Web 应用程序（在某种程度上）与客户端隔离开来，并允许它节省资源，例如通过不提供静态文件并让 Nginx 在有意义的时候缓存一些 webapp 的结果。
如果您正在进行开发，这可能看起来开销很大；但对于生产来说，它更有意义。但是，最好让您的开发环境尽可能地模仿您的生产环境。
我在为我正在 Phaser. I’m using flask-socketio on the server (and socket.io on the client-side) for networking which is why I’m trying to get this working under Flask. As far as I can tell, I must use Flask to serve the static resources because otherwise I run into the problem of the 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 代码。
所以我的问题是，如何提供静态资源才能不违反同源策略？
- 除了使用‘url_for’之外，还有其他安全的方式在 Flask 中提供静态资源吗？
- 或者我应该使用 nginx 作为 反向代理？在 flask-socketio 文档中，我找到了这个 nginx 配置片段：Flask-SocketIO documentation（请向下滚动到“Using nginx as a WebSocket Reverse Proxy”）
关于#2，我不太明白它应该如何工作。如果我应该做#2，有人可以解释一下如果 Flask 在端口 5000 上侦听我应该如何配置 nginx 吗？我在该片段的何处配置文件系统上我的静态资产的路径？在我的 javascript 代码中，我使用什么 url 路径来引用资产？
通常，人们会在 "main" 端口上设置 Nginx（或其他一些通用 Web 服务器），然后将其配置为将某些请求转发到您的应用程序服务器（在本例中为 Flask）客户端浏览器的辅助端口 invisible/unknown。 Flask 会将结果提供给 Nginx，然后 Nginx 会将结果转发给用户。
这被称为 reverse-proxy, and Nginx is widely considered 此设置的不错选择。这样，所有文件都由 Nginx 提供给客户端，因此客户端不会注意到其中一些文件实际上来自您的应用程序服务器。
从架构的角度来看，这很好，因为它将您的 Web 应用程序（在某种程度上）与客户端隔离开来，并允许它节省资源，例如通过不提供静态文件并让 Nginx 在有意义的时候缓存一些 webapp 的结果。
如果您正在进行开发，这可能看起来开销很大；但对于生产来说，它更有意义。但是，最好让您的开发环境尽可能地模仿您的生产环境。