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