Don't know how to configure Azure static web for url in "[...]/"

Question

I have a simple static web pages that are delivered by an Azure Static Web App.

In the web site, I got relative links that are ending with "[...]/". In the content, files "index.html" are existing.

To render such pages I test for staticwebapp.config.json:

  "navigationFallback": {
    "rewrite": "index.html"
  },
  "mimeTypes": {
    ".html": "text/html"
    ".js": "application/javascript"
  }

With that, links ending with "[...]/" are returned with Content-Type: application/octet-stream

If I do that:

  "navigationFallback": {
    "rewrite": "index.html"
  },
  "globalHeaders": {
    "content-type": "text/html; charset=utf-8"
  },
  "mimeTypes": {
    ".html": "text/html"
     ".css": "text/css",
  }

then "[...]/" are well returned with Content-Type: text/html; charset=utf-8;
But css are also retuned with same content type, and so having other troubles.

Any idea how to fix it ?

Answer 1

I have find the issue. If there is "." in the path, the behaviour is different. Example:

• /release-0-0/ => is rendered correctly
• /release-0.0/ => is octet steam.

Answer 2

Hi ,

The issue where links ending with / are being served with the wrong content type, specifically application/octet-stream. This typically happens when using the navigationFallback to rewrite URLs to index.html because the server isn't automatically recognizing it as an HTML page.

Here’s how you can adjust your staticwebapp.config.json to fix the issue and ensure that your pages and static assets are returned with the correct content types.

You should configure per-path headers in the routes section of your staticwebapp.config.json to correctly serve the HTML content type for pages while leaving other assets (like CSS and JS) with their appropriate MIME types.

Here’s an updated version of your staticwebapp.config.json:

{
  "navigationFallback": {
    "rewrite": "index.html"
  },
  "mimeTypes": {
    ".html": "text/html",
    ".js": "application/javascript",
    ".css": "text/css"
  },
  "responseOverrides": {
    "404": {
      "rewrite": "/index.html",
      "statusCode": 200
    }
  },
  "routes": [
    {
      "route": "/*",
      "headers": {
        "content-type": "text/html; charset=utf-8"
      }
    },
    {
      "route": "/static/*",
      "headers": {
        "content-type": "application/javascript"
      }
    },
    {
      "route": "/css/*",
      "headers": {
        "content-type": "text/css"
      }
    }
  ]
}

navigationFallback: Ensures that URLs like /about/ or /contact/ correctly rewrite to index.html.

mimeTypes: Defines the correct MIME types for .html, .js, and .css files.

responseOverrides: Ensures that even when you get a 404 error for a path like /about/, it will correctly serve index.html as the fallback with status 200.

routes: This section allows you to set specific headers for different routes (like /static/* for JS files and /css/* for CSS files) while ensuring HTML files are served with the correct content type (text/html).

You can mark it 'Accept Answer' if this helped you
Regards,
Vishvani