Resource blocked due to MIME type mismatch

Questions / Help
1

I deployed a small app (Django, React). The app deploys fine, but the js script implementing the React portion does not show. On the Client side, I’m getting the following error:

In Firefox:

The resource from “https://bitter-fire-7529.fly.dev/static/chat/asset-bundle.1ffdbdd19cad.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)."

In Brave:

Refused to execute script from ‘https://bitter-fire-7529.fly.dev/static/chat/asset-bundle.1ffdbdd19cad.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled."

Basically, the server is sending the MIME type of “text/html” for the script, but I need it to send “text/javascript”

Within my app the script tag in the index.html file looks like:

 <script type="text/javascript" src="{% static 'chat/asset-bundle.js' %}"></script>

From this post/announcement:
New Feature: Basic HTTP response header modification
I revised my fly.toml file to:

...
[[services.ports]]
    force_https = true
    handlers = ["http"]
    port = 80
    http_options = { response = { headers = { Content-Type = ["text/html", "text/javascript"] } } }
...

With that, I re-deployed. The app seemingly deployed correctly, but I get the same MIME errors as above. Note: All of this works correctly when I run the app locally on my machine.

Any help would be greatly appreciated. I’m somewhat of a newbie.

Thanks.

2

Hi,

Since nobody else has responded, I’ll take a guess :slight_smile:

I’d assume the reason you are getting text/html as the MIME type is because the request for that static file is being served from the same domain as your app, and so is being treated like a dynamic request. As you mention with the toml, you could get Fly to handle that for you, as the request has to pass through its proxy to get to your app. It can adjust the headers.

However it may be easier to handle it in your app. Then it would be consistent with local (where you don’t have the Fly proxy). You’d likely want something like Using WhiteNoise with Django - WhiteNoise 6.3.0 documentation to handle static files. Nodejs has something similar - you need to tell it you want it to handle static files (paths, headers etc), else it doesn’t know to do that.

If you already have whitenoise (or equivalent) it would likely be a case of adjusting the path to account for where the files are on Fly vs local. Maybe via an environment variable.

3

Thank you Greg, I appreciate you taking the time. I do have WhiteNoise. I will look at the Documentation. I copied my app from local to Fly replicating the file structure. In the Dockerfile:

COPY . .

I’m not sure I follow what you mean by adjusting the path to account for where files are. Should the relative paths be the same?

2 Likes
4

No problem. It should be working :thinking:.

Yep, that Dockerfile line will indeed copy the files across (you can check if you run fly ssh console you should be able to SSH-in to your app’s vm, and look around its file system to make sure).

As regards paths, yes, relative ones should be the same. I just wondered if there were any absolute ones, which wouldn’t be the same on your local machine vs a Fly vm e.g

http://whitenoise.evans.io/en/stable/django.html#WHITENOISE_ROOT

5

Greg,

Thank you. Your comments led to the solution.

First, although I responded that I had Whitenoise installed, I actually only had the STATICFILES_STORAGE variable defined. I forgot to include WhiteNoise in the Middleware. I included the Middleware and I set the WHITENOISE_MIMETYPES. These solved the problem.

For completeness, the settings.py contains the following:

WHITENOISE_MIMETYPES = {'.js': 'text/javascript'}

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    ...,
]

# Static files (CSS, JavaScript, Images)

# The below settings are based on info here:  https://docs.djangoproject.com/en/4.1/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = BASE_DIR/"staticfiles"

# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"

Hope this helps someone else experiencing similar issue.

2 Likes