拒绝将 path_to_bundle 作为脚本执行，因为给出了“X-Content-Type: nosniff”，并且它的 Content-Type 不是脚本 MIME 类型

Question

I'm developing web app using Django as a backend and Vue js as a frontend.我正在开发 web 应用程序，使用 Django 作为后端，Vue js 作为前端。 I connected them via webpack.我通过 webpack 连接它们。 When I develop app in Dev mode, everything is good, I don't use chunks, which are created using npm run build .当我在开发模式下开发应用程序时，一切都很好，我不使用使用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但是当涉及到 Stage 或 Prod 模式时，当 Django 和 npm 上的DEBUG=False时，在 vue js 上npm run build ，以构建所有 static 文件，

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...也许我使用了不正确的 webpack 设置，请帮助我...

My webpack.config.js :我的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:我的base.html主体，我在其中渲染包：

<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 :和 html 文件，用于在前端渲染src ，该文件继承自该base.html ：

{% load render_bundle from webpack_loader %}

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

Answer 1

So after several hours I found out what went wrong.所以几个小时后，我发现出了什么问题。

I had an invalid paths of static files in django configuration.我在 django 配置中有一个无效的 static 文件路径。 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一切顺利

Answer 2

I had this issue with an included script tag.我遇到了包含脚本标签的问题。 Adding the attribute type with value text/javascript fixed this for me.添加带有值text/javascript的属性type为我解决了这个问题。

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

拒绝将 path_to_bundle 作为脚本执行，因为给出了“X-Content-Type: nosniff”，并且它的 Content-Type 不是脚本 MIME 类型

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-06-16 07:43:10

解决方案2
1 2021-03-14 22:18:07

拒绝将 *path_to_bundle* 作为脚本执行，因为给出了“X-Content-Type: nosniff”，并且它的 Content-Type 不是脚本 MIME 类型

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-06-16 07:43:10

解决方案2 1 2021-03-14 22:18:07

拒绝将 path_to_bundle 作为脚本执行，因为给出了“X-Content-Type: nosniff”，并且它的 Content-Type 不是脚本 MIME 类型

解决方案1
1 已采纳 2020-06-16 07:43:10

解决方案2
1 2021-03-14 22:18:07