如何解決Static Web App問題

丞佑鄭 0

我將前端透過 GitLab 部署到 Azure 上，
(I deployed the frontend to Azure through GitLab.)

部署成功之後，訪問前端網址：https://~~????????????????~~.azurestaticapps.net，
(After a successful deployment, I accessed the frontend URL: https://????????????????.azurestaticapps.net)

結果 Console 出現錯誤：
(The console showed an error:)
Refused to apply style from 'https://~~????????????????~~.azurestaticapps.net/css/app.f07feabe.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Understand this error

Refused to apply style from 'https://~~????????????????~~.azurestaticapps.net/css/chunk-vendors.b029c8dc.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Understand this error

Refused to execute script from 'https://~~????????????????~~.azurestaticapps.net/js/app.51a496a1.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.Understand this error

Refused to execute script from 'https://~~????????????????~~.azurestaticapps.net/js/chunk-vendors.f318a04e.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.Understand this error

Refused to apply style from 'https://~~????????????????~~.azurestaticapps.net/css/app.f07feabe.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Understand this error

附上我的 staticwebapp.config.json：
(There is my staticwebapp.config.json)


{

  "platform": {},

  "routes": [


{

  "route": "/api/*",

  "rewrite": "https://

},

{

  "route": "/*",

  "rewrite": "/index.html"

}
  ],

  "navigationFallback": {


"rewrite": "/index.html",

"exclude": ["/api/*", "/css/*", "/js/*", "/favicon.ico"]
  }

}

匿名

2025-05-22T20:54:52.7466667+00:00
Hi 丞佑鄭
這通常發生在瀏覽器嘗試載入檔案（例如 .css 或 .JS）但卻收到 HTML 頁面（通常是 index.html）時。它會導致 MIME 類型不匹配，並且瀏覽器會出於安全原因阻止它。

該問題很可能是由於您的 staticwebapp.config.json 檔案中的配置引起的 - 特別是 nafigationfallback.exclude 設定。

目前，您正在從 Folwack 中排除 /CSS /* 和 /JS /*，這會阻止 Azure 正確提供位於這些路線下的穩定屬性的服務。

透過刪除 navigationfallback 下 /CSS /* 和 /JS /* 的排除規則來更新您的 staticwebapp.config.json 檔案。

{ 「平台」： {}， "路線": [ { “路由”：“/api/*”， “重寫”：“/api” }, { “路線”： ”/*”， “重寫”：“/index.html” } ], “導航回退”：{ “重寫”：“/index.html”， “排除”：[“/api/*”，“/favicon.ico”] } }

Azure Static Web Apps 可以正確提供這些檔案以正確重寫 index.html，Azure Static Web Apps，除了 Azure Static Web Apps，可以重寫 index.html。

如果您還有任何其他疑慮或疑問，請隨時與我們聯繫。
匿名

2025-05-23T18:37:33.3533333+00:00

Hi 丞佑鄭
我們還沒有收到您上次的回复，只是想看看您是否已經有了解決方案。如果您有任何解決方案，請與社區分享，因為它可以幫助其他人。否則，我們將回覆更多詳細資訊並盡力提供協助。
匿名

2025-05-26T16:20:39.9933333+00:00

Hi 丞佑鄭我們還沒有收到您上次的回复，只是想看看您是否已經有了解決方案。如果您有任何解決方案，請與社區分享，因為它可以幫助其他人。否則，我們將回覆更多詳細資訊並盡力提供協助。

Sampath 3,880 Microsoft 外部員工仲裁者

Hi Chengyou Zheng,
Recommended Working staticwebapp.config.json

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/api/*", "/css/*", "/js/*", "/favicon.ico", "/assets/*"]
  }
}

Alternatively, if you want to use the routes block, ensure you do not override static file paths:

{
  "platform": {},
  "routes": [
    {
      "route": "/api/*",
      "rewrite": "/api/*"
    },
    {
      "route": "/*",
      "rewrite": "/index.html"
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/api/*", "/css/*", "/js/*", "/favicon.ico"]
  }
}

But this configuration is redundant unless you're doing something special with routes. The simpler version above is better.

匿名

2025-05-28T17:16:34.43+00:00

Hi 丞佑鄭我們還沒有收到您上次的回复，只是想看看您是否已經有了解決方案。如果您有任何解決方案，請與社區分享，因為它可以幫助其他人。否則，我們將回覆更多詳細資訊並盡力提供協助。
匿名

2025-05-30T16:22:54.6366667+00:00

Hi 丞佑鄭我們還沒有收到您上次的回复，只是想看看您是否已經有了解決方案。如果您有任何解決方案，請與社區分享，因為它可以幫助其他人。否則，我們將回覆更多詳細資訊並盡力提供協助。

共用方式為

如何解決Static Web App問題

您的回答