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

【问题标题】：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拒绝将 *path_to_bundle* 作为脚本执行，因为给出了“X-Content-Type: nosniff”并且它的 Content-Type 不是脚本 MIME 类型
【发布时间】：2020-10-05 01:26:10
【问题描述】：

我正在使用 Django 作为后端和 Vue js 作为前端来开发 Web 应用程序。我通过 webpack 连接它们。当我在 Dev 模式下开发应用程序时，一切都很好，我不使用使用 npm run build 创建的块。但是当涉及到 Stage 或 Prod 模式时，当 Django 上的 DEBUG=False 和 vue js 上的 npm run build 构建所有静态文件时，我得到了错误

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.

也许我使用了不正确的 webpack 设置，请帮助我...

我的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': ['*']
      })
  }
}

我的 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>

和用于在前端渲染src的html文件，它继承自base.html：

{% load render_bundle from webpack_loader %}

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

【问题讨论】：

标签： javascript css django vue.js webpack

【解决方案1】：

所以几个小时后我发现出了什么问题。

我在 django 配置中有一个无效的静态文件路径。调试和更改网址后

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

到

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

一切顺利

【讨论】：

【解决方案2】：

我遇到了包含脚本标签的问题。添加属性type 和值text/javascript 为我解决了这个问题。

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

【讨论】：