Azure静态网站配置CDN后仅显示空白页，求解决方案

问题核心 #

你遇到的空白页问题本质是Azure CDN未正确传递Azure存储中的文件MIME类型，所有资源（包括JS、CSS、ICO）都被返回为text/html，导致浏览器严格的MIME类型检查拒绝加载Angular的模块脚本，触发报错：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

解决方案 #

1. 配置Azure CDN规则引擎，映射正确的MIME类型 #

登录Azure门户，找到你的CDN配置文件，按以下步骤操作：

• 进入规则引擎页面
• 添加一条新规则，设置以下匹配条件与操作：
  • 匹配条件：选择「文件扩展名」，匹配操作选「等于」，依次为不同扩展名配置规则（可添加多条匹配条件）：
    • .js → 操作选择「修改响应头」，头名称填Content-Type，头值填application/javascript
    • .css → 响应头Content-Type设为text/css
    • .ico → 响应头Content-Type设为image/x-icon
• 保存规则，等待CDN配置生效（通常需要5-30分钟）

2. 强制刷新CDN缓存 #

在CDN端点页面，点击「刷新」按钮，在刷新路径中输入/*，清除所有缓存内容，确保新的MIME类型配置立即生效。

3. 确认Angular构建正确性 #

• 本地运行ng build --configuration production后，测试dist文件夹内的静态文件是否能正常访问（可使用npx serve dist/your-project-name本地验证）
• 无需修改index.html中的script标签type属性，Angular生产构建默认生成的模块类型脚本符合规范，修改反而可能引入其他问题

为什么之前的操作无效 #

你调整Content-Security-Policy的操作不解决根本问题——错误根源是MIME类型不匹配，而非脚本/样式的CSP限制，所以该配置对当前问题无帮助。

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