Blocked because of disallowed mime type ("text/html")
AdamBrashear
I am aware there are many questions regarding this topic, but after extensive looking there was only one Firebase example and it didn't cover my scenario with using hosting.
I have an app that I am currently testing in Firebase hosting, the app goes through the data retrieval process well enough with data coming in fine on first page entry.
When I go to refresh the page in order to test that the cache we are using retrieves the data properly, the entire app goes blank and I receive the errors shown below
After some looking into if similar example have already been asked, I found out that the errors in the console dont necessarily point to the actual issue, making this all the more confusing. In order to help the reader I will include the vite and firebase config files to show the project is connected fine. I will also add the index.html in my dist folder to show the .js file mentioned in the error.
One thing I did notice while checking my cloud functions on the backend is that the function that retrieves the detail information is only hit once on the first successful load. When I refresh, it doesn't get hit again, which gives me the idea it may be something related to the router, but I haven't worked out what the issue there might be besides the docId that's passed as a prop not being available.
I am able to refresh any page where I don't pass the docId as a prop as well, but some confusion I have is I'm not able to replicate the error I'm getting on localhost. There, I am able to refresh fine anywhere without issues at all. Any idea what the problem here is? I am using Vue 3 with Vite and Firebase.
samthecodingman
As covered by @BrownieInMotion's answer, your rewrite rule for "source": "**" is redirecting all non-existent files to your main /index.html file. Because ./assets/index.659db071.js does not exist on your deployed app (at time of writing, the current version is ./assets/index.2b83c04b.js), the browser gets sent the content of /index.html instead (a text/html file). This causes the error you are seeing.
To correct your rewrite rule, so that it doesn't redirect for anything in the /assets folder, you should update your firebase.json file to the following:
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**",
],
"rewrites": [
{
"source": "!/@(assets|images)/**",
"destination": "/index.html"
}
]
}
}
Here any file in the "assets" (make sure its the same as build.assetsDir) or "images" (included to show how to specify multiple folders) folders won't be redirected to /index.html and will instead be shown your configured 404 error page.
Additionally, your index.html should probably be updated to refer to /assets/index.****.js instead (note missing . at the start) so that it always refers to https://example.com/assets/index.****.js instead of improperly handling nested paths such as https://example.com/renter-team-profile/assets/index.****.js in your error in the question. Unfortunately, I'm not familiar enough with Vite to know where the setting for this is.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
Related Related
- 1
Blocked because of a disallowed MIME type (“text/html”) : Angular 8 deployed on tomcat 9.0.30 fails to serve the assets
- 2
Stylesheet not loaded because of MIME-type
- 3
Refused to execute script from '*' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled
- 4
Stylesheet not loading because MIME type is text/html
- 5
Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled
- 6
Refused to execute script from because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled
- 7
Error on my html because of type MIME
- 8
Refused to apply style because its MIME type "text/html" is not supported stylesheet MIME type, and strict MIME checking is enabled
- 9
Refused to execute script because strict MIME type checking is enabled
- 10
Refusing to apply styles because MIME type
- 11
Stylesheet not loaded because of MIME-type Angular application
- 12
How do I resolve resource was blocked, MIME type mismatch in Angular?
- 13
Node server: Loading module was blocked because of a disallowed MIME type (“text/html”)
- 14
Loading module was blocked because of a disallowed MIME type (“application/wasm”)
- 15
Failed to load module script because of a disallowed MIME type
- 16
Webpack + Keycloak JavaScript: Resource was blocked due to MIME type (“text/html”)
- 17
Angular 8 inside of ASP Net Core was blocked because of a disallowed MIME type (“text/html”)
- 18
Nginx was blocked because of a disallowed MIME type (“text/html”). Angular 8
- 19
Nginx cannot serve css files because of MIME type error
- 20
Refused to apply style from [Link] because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled
- 21
Stylesheet not loaded on first boot because of MIME-type
- 22
Resource was blocked due to MIME type mismatch using pug and node
- 23
Refused to apply style from 'URL' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled
- 24
javascript was blocked due to MIME type mismatch Domino 10.0.4
- 25
Refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME type
- 26
"Refused to apply style from because its MIME type "('font/woff2')" is not a supported stylesheet MIME type, and strict MIME checking is enabled"
- 27
content is not loading because its MIME type, "text/html" is not "text/css"
- 28
Refused to display style because MIME type
- 29
Module blocked because of a disallowed MIME type (“text/html”)
Comments