# Resource blocked due to MIME type mismatch

**URL:** <https://community.fly.io/t/resource-blocked-due-to-mime-type-mismatch/9849>\
**Category:** Questions / Help\
**Created:** [January 5, 2023, 6:27pm UTC](https://community.fly.io/t/resource-blocked-due-to-mime-type-mismatch/9849 "2023-01-05T18:27:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![TKChattoraj](https://avatars.discourse-cdn.com/v4/letter/t/2acd7d/32.png) [@TKChattoraj](https://community.fly.io/u/TKChattoraj)\
**Post date:** [January 5, 2023, 6:27pm UTC](https://community.fly.io/t/resource-blocked-due-to-mime-type-mismatch/9849/1 "2023-01-05T18:27:14Z")

</div>

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”](https://bitter-fire-7529.fly.dev/static/chat/asset-bundle.1ffdbdd19cad.js%E2%80%9D) 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](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:

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

```

From this post/announcement:  
[New Feature: Basic HTTP response header modification](https://community.fly.io/t/new-feature-basic-http-response-header-modification/3594)  
I revised my fly.toml file to:

```auto
...
[[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.

---

<div class="post-metadata">

**Author:** ![greg](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/greg/32/2119_2.png) [@greg](https://community.fly.io/u/greg)\
**Post date:** [January 6, 2023, 4:17pm UTC](https://community.fly.io/t/resource-blocked-due-to-mime-type-mismatch/9849/2 "2023-01-06T16:17:09Z")

</div>

Hi,

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

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](http://whitenoise.evans.io/en/stable/django.html) 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.

---

<div class="post-metadata">

**Author:** ![TKChattoraj](https://avatars.discourse-cdn.com/v4/letter/t/2acd7d/32.png) [@TKChattoraj](https://community.fly.io/u/TKChattoraj)\
**Post date:** [January 6, 2023, 4:40pm UTC](https://community.fly.io/t/resource-blocked-due-to-mime-type-mismatch/9849/3 "2023-01-06T16:40:35Z")

</div>

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:

```auto
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?

---

<div class="post-metadata">

**Author:** ![greg](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/greg/32/2119_2.png) [@greg](https://community.fly.io/u/greg)\
**Post date:** [January 6, 2023, 5:00pm UTC](https://community.fly.io/t/resource-blocked-due-to-mime-type-mismatch/9849/4 "2023-01-06T17:00:26Z")

</div>

No problem. It _should_ be working 🤔.

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](http://whitenoise.evans.io/en/stable/django.html#WHITENOISE_ROOT)

---

<div class="post-metadata">

**Author:** ![TKChattoraj](https://avatars.discourse-cdn.com/v4/letter/t/2acd7d/32.png) [@TKChattoraj](https://community.fly.io/u/TKChattoraj)\
**Post date:** [January 7, 2023, 6:34pm UTC](https://community.fly.io/t/resource-blocked-due-to-mime-type-mismatch/9849/5 "2023-01-07T18:34:57Z")

</div>

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:

```auto
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.