Azure 静态 Web 应用程序为 CSS 和 JS 文件返回错误的 MIME 类型（text/html 而不是 application/javascript 和 text/css）

Question

问题：

我在 Azure Static Web App 上托管两个 Angular 应用程序时遇到问题。每个应用程序都托管在自己的子目录中：

• hostedPages

  应用程序可在

  https://xyz/hostedPages/

  获取。

• profile

  应用程序可在

  https://xyz/profile/

  获取。

服务器上的文件结构：

/
├── staticwebapp.config.json
├── hostedPages/
│   ├── index.html
│   ├── runtime.397bdeab26062b41.js
│   ├── polyfills.f2987581d2a3f7b2.js
│   ├── main.ecb07ded167b874e.js
│   ├── styles.7a5458fde1f85a21.css
│   └── assets/
└── profile/
    ├── index.html
    ├── runtime.397bdeab26062b41.js
    ├── polyfills.f2987581d2a3f7b2.js
    ├── main.ecb07ded167b874e.js
    ├── styles.7a5458fde1f85a21.css
    └── assets/

staticwebapp.config.json

的配置：

{
  "routes": [
    {
      "route": "/hostedPages/*",
      "rewrite": "/hostedPages/index.html"
    },
    {
      "route": "/profile/*",
      "rewrite": "/profile/index.html"
    }
  ],
  "mimeTypes": {
    ".js": "application/javascript",
    ".css": "text/css",
    ".json": "application/json",
    ".html": "text/html",
    ".svg": "image/svg+xml",
    ".woff": "font/woff",
    ".woff2": "font/woff2",
    ".ttf": "font/ttf"
  }
}

问题：

尝试加载应用程序时，浏览器报告 MIME 类型错误，如下所示：

Refused to apply style from 'https://xyz/styles.20bfe6f94abc7290.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

同样适用于

.js

文件：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html".

提前感谢您的指导

到目前为止我检查过的内容：

1. 路由：
   我验证了这些文件存在于正确的目录中（

   /hostedPages

   和

   /profile

   ）。该问题似乎与服务器配置或 Angular 中不正确的

   baseHref

   有关。

我的问题：

如何正确配置 Azure 静态 Web 应用程序，以使用 CSS 和 JS 文件的正确 MIME 类型为子目录中的 Angular 应用程序提供服务？我是否在

staticwebapp.config.json

配置或 Angular 构建过程中遗漏了某些内容？

Answer 1

我创建了包含两个 Angular (19) 项目的示例应用程序，使用 GitHub Actions 成功将其部署到 Azure 静态 Web 应用程序，并且可以毫无问题地访问路由。

以下是我的项目结构：

staticwebapp.config.json:

{
    "routes": [
      {
        "route": "/hostedPages/*",
        "rewrite": "/hostedPages/index.html"
      },
      {
        "route": "/profile/*",
        "rewrite": "/profile/index.html"
      }
    ],
    "navigationFallback": {
      "rewrite": "/index.html",
      "exclude": [
        "/hostedPages/*.js",
        "/hostedPages/*.css",
        "/profile/*.js",
        "/profile/*.css"
      ]
    },
    "mimeTypes": {
      ".js": "application/javascript",
      ".css": "text/css"
    }
  }

使用下面的YAML文件，我成功地将应用程序部署到Azure，其中基本路线是

hosted-pages

。

GitHub 工作流程文件：

name: Azure Static Web Apps CI/CD
on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main
jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - name: Install Dependencies
        run: |
          npm install
      - name: Build hostedPages
        run: |
          npx ng build hostedPages --output-path=dist/hostedPages
      - name: Build profile
        run: |
          npx ng build profile --output-path=dist/profile
      - name: List files in dist/hostedPages
        run: |
          echo "Listing files in dist/hostedPages"
          ls -R dist/hostedPages
      - name: List files in dist/profile
        run: |
          echo "Listing files in dist/profile"
          ls -R dist/profile
      - name: Merge Output Directories
        run: |
          mkdir -p dist/app
          mkdir -p dist/app/profile
          mv dist/hostedPages/browser/* dist/app/
          mv dist/profile/browser/* dist/app/profile/
      - name: List files in dist/app
        run: |
          echo "Listing files in dist/app"
          ls -R dist/app
      - name: Verify index.html exists
        run: |
          if [ ! -f dist/app/index.html ]; then
            echo "index.html not found in dist/app"
            exit 1
          fi
      - name: Deploy to Azure Static Web Apps
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_COAST_0100D7E0F }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} 
          action: "upload"
          app_location: "dist/app"  
          api_location: ""  
          output_location: ""  
  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_COAST_0100D7E0F }}
          action: "close"

Azure 输出：