Azure API Management后部署Flask应用UI异常排查求助

核心问题 #

UI破碎本质是静态资源（CSS、JS、图片）加载路径错误。当通过/mv后缀访问时，浏览器会把静态资源的相对路径（比如/static/css/style.css）解析成https://app-mv.azurewebsites.net/mv/static/css/style.css，但实际这些资源仍存放在根目录的/static文件夹下，导致资源请求404，页面样式直接失效。

具体解决步骤 #

1. 配置Flask的APPLICATION_ROOT #

在Flask代码中设置应用根路径，让静态资源自动生成带前缀的正确URL：

from flask import Flask
import os

app = Flask(__name__)
# 直接指定/mv，或用环境变量适配不同部署场景
app.config['APPLICATION_ROOT'] = '/mv'
# app.config['APPLICATION_ROOT'] = os.environ.get('APPLICATION_ROOT', '/')

这个配置会让Flask在生成静态资源URL时自动加上/mv前缀，比如url_for('static', filename='css/style.css')会输出/mv/static/css/style.css，刚好匹配APIM转发后的路径。

2. 模板中必须用url_for加载静态资源 #

检查HTML模板，所有静态资源引用不能硬编码路径，必须使用Flask的url_for函数：

<!-- 错误写法，禁止使用 -->
<link rel="stylesheet" href="/static/css/style.css">

<!-- 正确写法，统一用这个 -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

不管部署路径如何变化，这种方式生成的URL始终正确。

3. 配置Azure API Management的转发规则 #

确保APIM将/mv/*路径的请求转发到App Service的根路径：

• 在APIM的API设计页面，设置URL模板为/mv/{*path}
• 后端服务URL填写https://app-mv.azurewebsites.net/
• 这样当请求/mv/static/css/style.css时，APIM会自动转发到https://app-mv.azurewebsites.net/static/css/style.css，正确获取资源。

4. 检查Flask自定义路由（可选） #

如果应用有自定义路由，避免硬写路径，尽量用url_for生成跳转链接，防止因为路径前缀导致页面跳转错误。

验证方式 #

修改完成后，访问APIM转发后的URL，打开浏览器开发者工具（F12）的「网络」标签，确认所有静态资源的HTTP状态码为200，无404错误，此时页面样式即可恢复正常。

内容的提问来源于stack exchange，提问作者Michael Ver