Problems with MIME types on Google Cloud App Engine

I have a NodeJS application hosted on Google Cloud App Engine. It's built using Vite & Vue3 with Vite's native SSR. Everything runs smoothly when accessing the app through the google subdomain: <domain>.appspot.com. However, I encounter an error when trying to use my mapped domain, like domain.com, which displays the following message:

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.

Occasionally, it seems to work sporadically, but most of the time it triggers this mime type error. This affects both JavaScript and CSS files, which seem to be served as HTML content files.

Similar Issue: Mismatched MIME type with Google App Engine

This is my first time reaching out here, so please point out if there are any additional details needed.

Some Notes

  • I've observed that the mime type problem only arises for the index page (i.e., domain.com/), not for other pages like domain.com/test.
  • The production server (building & serving) runs without any issues.
  • Using Vue Router, I discovered that initially loading the page as domain.com/test before switching to domain.com resolves the mime issue when Vue renders the index page.
  • In addition, I utilize express.static to serve static files instead of relying on App Engine handlers configuration. Although I attempted serving static files from App Engine directly, it didn't perform well either.

Edit Upon further investigation, it appears that the files cannot be located. I suspect this might be related to how Google Cloud fetches the files. I will continue to investigate and provide updates.

node.jsexpressgoogle-app-enginegoogle-cloud-platformmime-types

Answer №1

After some investigation, I was able to resolve the issue at hand. It turns out that Google Cloud had been caching the "index" route causing the problem.

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

By implementing the above code while serving routes, I have prevented Google Cloud from caching the page and attempting to retrieve outdated css/js files.

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

Answer №2

Today, I noticed that my app has suddenly stopped sending the correct Content-type header when attempting to download a PDF preview using express. This simple code used to work perfectly:

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

Now, instead of receiving the expected application/pdf, I am getting text/html in response. This was not an issue previously and worked fine on my local machine. Could this be due to an update on the App Engine's end?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the Integration of Callbacks and Promises in Express.js

I'm currently developing an Express.js application where I am utilizing x-ray as a scraping tool to extract information. For each individual website I scrape, I intend to establish a unique model due to the distinct data and procedures involved in th ...

javascriptnode.jsexpressx-ray

Error: Unable to access the 'textContent' property of null - puppeteer

I've been delving into puppeteer lately and I'm quite enjoying it, but I keep encountering a particular issue. Is there a way to prevent this error from happening and retrieve the results of all non-null values? Sometimes this code functions corr ...

node.jspuppeteer

Identifying bots using user-agent for open graph: A step-by-step guide

Currently, I'm implementing some server-side logic for my single page application to identify different open graph crawlers. This will allow me to deliver open graph data instead of the standard index page. Based on my research, it seems that user ag ...

node.jsregexexpressfacebook-opengraph

Minimize the visibility of the variable on a larger scale

I have a nodejs app where I define global variables shared across multiple files. For example: //common.js async = requires("async"); isAuthenticated = function() { //... return false; }; //run.js require("common.js"); async.series([function () { i ...

javascriptnode.jsuglifyjs2

Refresh the screen after 10 seconds

Apologies if I'm not explaining this well in advance. I am looking to create a dynamic webpage using JavaScript that automatically updates every 10 seconds. Does anyone have an example code snippet for this? **Specifically, allow ...

javascriptnode.jsexpressejs

Issue encountered when attempting to send FormData from Next.js API to Express.js backend resulting in Error 405: Bad Request

SOLVED / SEE MY OWN ANSWER FOR DETAILS Encountering a perplexing error that has left me stuck. I am currently facing an issue where I am trying to send an audio recording captured by the user in my Next.js Frontend to my Next.js API, which appears to be f ...

reactjsexpressnext.jsmultipartform-datavercel

Securing my Next.js APIs for controlled access in my application

I'm currently developing a Next.js application and I want to secure access to my APIs so that only my application can make requests to them. In a previous project using the MERN stack, I utilized cors to restrict API access to my domain. However, it ...

node.jsfirebasenext.jsfirebase-app-check

Error message "node-pre-gyp: not detected" during the compilation of canvas using Yarn 1

After updating the path to my Next.js application on my VPS server, I'm facing issues with Yarn not installing dependencies correctly. (I am using Yarn 1 and not Yarn 2.) Whenever Yarn tries to build the native code for the npm module canvas, it cras ...

node.jsnext.jsyarnpkgnode-gyp

Tips for handling the final row of a CSV file in Node.js with fast-csv before the 'end' event is triggered

After using fast-csv npm, I noticed that in the code provided below, it processes the last row (3rd row) of CSV data only after triggering the "end" event. How can this issue be resolved? ORIGINAL OUTPUT : here processing request here processing re ...

javascriptnode.jscsvnpmcallback

Respond to a recommendation with a response

I've been working on setting up a bot for my Discord server, and I recently added a "marry" command to it. Whenever a user makes an offer, a message announcing the proposal pops up with two reaction options. The first reaction signifies yes, while th ...

javascriptnode.jsdiscord.js

Wait for NodeJS to finish executing the mySQL query

I am attempting to send an object from the controller to the view. To keep my queries separate from the controller, I am loading a JS object (model). My model structure is as follows: function MyDatabase(req) { this._request = req; this._connection = ...

javascriptmysqlnode.jsexpressasynchronous

Encountering Error: ImportError when working with Google App Engine locally: Module google.cloud.bigquery not found

Just like the title suggests. I have included the following code in appengine_config.py, but it doesn't seem to be working: # appengine_config.py from google.appengine.ext import vendor # Add any libraries installed in the "lib" folder. vendor.add( ...

pythongoogle-app-enginegoogle-bigquery

Effective Strategies for Managing Real-Time Messaging in a MEAN Stack Application

I'm looking to create a MEAN Stack application, but I'm struggling to find clear guidance on how to implement live messaging similar to applications like WhatsApp or Facebook Messenger. At first, I considered using the setTimeout function and ma ...

node.jsangularmongodbexpressmean

Express routes are causing conflicts with React routes

I currently have the build files for my react application (generated from running npm run build) stored in the /public folder within my backend directory. Here is the content of my index.js file located in my backend: const express = require('express ...

node.jsreactjsexpressreact-router

Eliminating a particular tag along with its corresponding text - cheeriojs

Is there a way for me to remove a particular tag and its content from the HTML file I am scraping? I need help in searching for and deleting this specific tag and text altogether. <p class="align-left">&#xA0; Scheduled Arrival Time</p> ...

node.jsweb-scrapingcheerio

Is there a way to retrieve the response body in Express framework?

In my NodeJS API using Express, I am attempting to save the response body of a request. To achieve this, I have created two middleware functions. app.use((req, res,next) => { res.status(404).json({ errors: [{ field: "url", ...

javascriptnode.jsexpress

Encountered an issue while trying to install dependencies using npm install hexo-cli -g

Every time I try to execute npm install hexo-cli -g in the Git Bash terminal on my computer, I encounter a network proxy problem. Here is an image showing the issue: Screenshot of the error in Git Bash ...

node.jsnpmnpm-installhexo

Dealing with Database Timeout in Express JS

I have been trying to extract SQL query execution into a separate file to prevent code repetition, but I am facing timeout issues during execution. var mysql = require('mysql'); const connectionData = { host: 'localhost', user: ...

javascriptmysqlnode.jsexpress

Is there a way to set up IIS to host my NodeJS REST API on a unique URL without having to expose any additional ports?

Recently, my organization provided me with a Windows Server running Windows Server 2019 and IIS. I have successfully configured PHP and MySQL to host my website on this server using IIS. However, I have now developed a new service using Node.js that serve ...

node.jsexpressiisserver

Install a package by using the npm command within a node container

After following the steps outlined in the node.js documentation to create a Dockerfile, I attempted to run the command docker exec -it mynodeapp /bin/bash with the intention of entering the container to install a new npm package. However, I encountered the ...

node.jsdockernpmnpm-install