MIME type issues with Google Cloud App Engine-CodePudding

I'm hosting a NodeJS application on google cloud app engine. Utilizing Vite & Vue3 alongside Vite's native SSR. Currently, the application works fine with the google subdomain: <domain>.appspot.com. However, when I try using the domain I mapped to ie: domain.com, it shows this error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Sometimes it seems to work randomly, however, most of the time it creates the mime type error. This occurs for both JavaScript & CSS files which are served as files with HTML content.

Similar Issue: Mismatched MIME type with Google App Engine

This is my first time posting here so please let me know if there's anything else I need to add.

Some Notes

I've noticed that the mime type issue only occurs for the index page (so domain.com/) and not for pages like domain.com/test.
Running the production server (building & serving) doesn't have any issues
Since I'm using Vue Router, I've noticed that first loading the page as domain.com/test and then moving over to domain.com works. So there's no mime issue when vue renders the index page.
I'm also using express.static to serve static files, and not use the App Engine handlers configuration. I've tried switching from express to serving static from app engine but that also didn't work that well.

Edit After some investigation, seems like the files are not being found. I'm going to assume this is an issue with how Google Cloud is fetching the files. Will continue to update.

CodePudding user response：

I have also found that today my app stopped providing a correct Content-type header when downloading a PDF preview with use of express. So, with the simplest

return res.writeHead(200, {
            'Content-Disposition': `inline;filename=filename.pdf`,
            'Content-Type': 'application/pdf'
            }).send();

I get text/html when request it regardless it is totally fine on the local debug machine and it actually worked yesterday. Probably, it is some update on the App Engine side?

CodePudding user response：

I seem to have solved it. It was an issue with Google Cloud's caching the "index" route.

res
            .status(200)
            .set({ "Content-Type": "text/html" })
            .set({
                etag: false,
                lastModified: false,
            })
            .end(HTML);

^ I used that code when serving routes now so it'll ensure google cloud doesn't cache the page and try to fetch old css/js files.

Reference: Google App Engine, index.html cached after deploy in express/react app