CODEWITHSUNDEEP
javascriptcssdjangovue.jswebpack
Denis Lenskiy
Denis Lenskiy

Reputation: 35

Refused to execute *path_to_bundle* as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type

I'm developing web app using Django as a backend and Vue js as a frontend. I connected them via webpack. When I develop app in Dev mode, everything is good, I don't use chunks, which are created using npm run build. But when it comes to Stage or Prod mode, when DEBUG=False on Django, and npm run build on vue js, to build all static files, I got error

Refused to execute http://localhost:8000/static/sections_dist/js/chunk-common.34112dfe.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.

Did not parse stylesheet at 'http://localhost:8000/static/sections_dist/css/chunk-common.677f6644.css' because non CSS MIME types are not allowed in strict mode.

maybe I'm using incorrect webpack settings, please help me with that...

My webpack.config.js:

const BundleTracker = require("webpack-bundle-tracker")
const path = require('path')

module.exports = {
  publicPath: "/static/sections_dist/",
  outputDir: '../project/static/sections_dist/',
  chainWebpack: config => {

    // config.optimization
    //   .splitChunks(false)

    config
      .plugin('BundleTracker')
      .use(BundleTracker, [{filename: '../frontend/webpack-stats.json'}])
    config.devServer
      .public('http://0.0.0.0:8000')
      .host('0.0.0.0')
      .port(8080)
      .hotOnly(true)
      .watchOptions({poll: 1000})
      .https(false)
      .headers({
        'Access-Control-Allow-Origin': ['*']
      })
  }
}

my base.html body, where I render bundles:

<body>
      <div id="app">

      </div>

      {% if not settings.DEBUG %}
        {% render_bundle 'chunk-common' 'js' 'SECTIONS' %}
        {% render_bundle 'chunk-vendors' 'js' 'SECTIONS' %}
        {% render_bundle 'chunk-vendors' 'css' 'SECTIONS' %}
        {% render_bundle 'chunk-common' 'css' 'SECTIONS' %}
      {% endif %}

      {% block js_application %}
      {% endblock %}
    </body>

and html file for rendering src in frontend, which is inheriting from that base.html:

{% load render_bundle from webpack_loader %}

{% block js_application %}
  {% render_bundle 'anonymous' 'js' 'SECTIONS' %}
  {% render_bundle 'anonymous' 'css' 'SECTIONS' %}
{% endblock %}

Upvotes: 1

Views: 3905

Answers (2)

Jeff Walters
Jeff Walters

Reputation: 4433

I had this issue with an included script tag. Adding the attribute type with value text/javascript fixed this for me.

<script src="..." type="text/javascript"></script>

Upvotes: 2

Denis Lenskiy
Denis Lenskiy

Reputation: 35

So after several hours I found out what went wrong.

I had an invalid paths of static files in django configuration. After debugging and changing urls from

path('static/<str:path>/', serve,
         {'document_root': settings.STATIC_ROOT}),
    path('media/<str:path>/', serve,
         {'document_root': settings.MEDIA_ROOT}),

to

re_path(r'^static/(?P<path>.*)$', serve,
            {'document_root': settings.STATIC_ROOT}),
    re_path(r'^media/(?P<path>.*)$', serve,
            {'document_root': settings.MEDIA_ROOT}),

everything got worked

Upvotes: 1

Related Questions