Django REST + Angular2中的CSS资源解释错误答案

【问题标题】：error with interpretation of CSS resources in Django REST + Angular2Django REST + Angular2中的CSS资源解释错误
【发布时间】：2017-03-22 07:52:46
【问题描述】：

我尝试在 pythonanywhere 上部署我的应用程序并遇到问题。我有这个错误：

资源被解释为样式表，但以 MIME 类型传输文本/html

我不知道为什么会这样。在 localhost 中一切正常。

完整的堆栈跟踪：

资源被解释为样式表，但以 MIME 类型传输文本/html： “http://rodion.pythonanywhere.com/static/node_modules/bootstrap/dist/css/bootstrap.min.css”。 rodion.pythonanywhere.com/:12 资源解释为样式表，但使用 MIME 类型 text/html 传输： “http://rodion.pythonanywhere.com/static/bower_components/alertify.js/themes/alertify.core.css”。 rodion.pythonanywhere.com/:13 资源解释为样式表，但使用 MIME 类型 text/html 传输： “http://rodion.pythonanywhere.com/static/bower_components/alertify.js/themes/alertify.bootstrap.css”。 rodion.pythonanywhere.com/:14 资源解释为样式表，但使用 MIME 类型 text/html 传输： “http://rodion.pythonanywhere.com/static/styles.css”。 rodion.pythonanywhere.com/:24 资源解释为样式表，但使用 MIME 类型 text/html 传输： “http://rodion.pythonanywhere.com/static/libs/fancybox/source/jquery.fancybox.css”。 rodion.pythonanywhere.com/:28 资源解释为样式表，但使用 MIME 类型 text/html 传输： “http://rodion.pythonanywhere.com/static/libs/fancybox/source/helpers/jquery.fancybox-buttons.css”。 rodion.pythonanywhere.com/:32 资源解释为样式表，但使用 MIME 类型 text/html 传输： “http://rodion.pythonanywhere.com/static/libs/fancybox/source/helpers/jquery.fancybox-thumbs.css”。 rodion.pythonanywhere.com/:11 资源解释为样式表，但使用 MIME 类型 text/html 传输： “http://rodion.pythonanywhere.com/static/bower_components/font-awesome/css/font-awesome.min.css”。 jquery.min.js:1 Uncaught SyntaxError: Unexpected token

index.html:

<html>
  <head>
    <base href="/"/>
    <title>PhotoHub</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% load staticfiles %}


    <link rel="stylesheet" href="{% static "node_modules/bootstrap/dist/css/bootstrap.min.css" %}">
    <link rel="stylesheet" href="{% static "bower_components/font-awesome/css/font-awesome.min.css" %}"/>
    <link rel="stylesheet" href="{% static "bower_components/alertify.js/themes/alertify.core.css" %}"/>
    <link rel="stylesheet" href="{% static "bower_components/alertify.js/themes/alertify.bootstrap.css" %}"/>
    <link rel="stylesheet" href="{% static "styles.css" %}">

    <!--Final attempt with fancybox-->
    <!-- Add jQuery library -->
    <!--<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>-->
    <script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>
    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="{% static "libs/fancybox/lib/jquery.mousewheel-3.0.6.pack.js" %}"></script>

    <!-- Add fancyBox -->
    <link rel="stylesheet" href="{% static "libs/fancybox/source/jquery.fancybox.css" %}" type="text/css" media="screen"/>
    <script type="text/javascript" src="{% static "libs/fancybox/source/jquery.fancybox.pack.js" %}"></script>

    <!-- Optionally add helpers - button, thumbnail and/or media -->
    <link rel="stylesheet" href="{% static "libs/fancybox/source/helpers/jquery.fancybox-buttons.css" %}" type="text/css" media="screen" />
    <script type="text/javascript" src="{% static "libs/fancybox/source/helpers/jquery.fancybox-buttons.js" %}"></script>
    <script type="text/javascript" src="{% static "libs/fancybox/source/helpers/jquery.fancybox-media.js" %}"></script>

    <link rel="stylesheet" href="{% static "libs/fancybox/source/helpers/jquery.fancybox-thumbs.css" %}" type="text/css" media="screen" />
    <script type="text/javascript" src="{% static "libs/fancybox/source/helpers/jquery.fancybox-thumbs.js" %}"></script>
    <!--Final attempt with fancybox-->


    <!--<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>-->
    <script src="{% static "node_modules/bootstrap/dist/js/bootstrap.min.js" %}"></script>
    <script src="{% static "bower_components/alertify.js/lib/alertify.min.js" %}"></script>


    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="{% static "node_modules/core-js/client/shim.min.js" %}"></script>
    <script src="{% static "node_modules/zone.js/dist/zone.js" %}"></script>
    <script src="{% static "node_modules/reflect-metadata/Reflect.js" %}"></script>
    <script src="{% static "node_modules/systemjs/dist/system.src.js" %}"></script>
    <!-- 2. Configure SystemJS -->
    <script src="{% static "systemjs.config.js" %}"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <photohub></photohub>
  </body>
</html>

【问题讨论】：

标签： django angular deployment pythonanywhere

【解决方案1】：

PythonAnywhere dev here：当我访问这些 URL 中的任何一个时，所提供的内容看起来像 HTML 而不是 CSS。查看您的网络应用程序设置，您似乎还没有完全设置静态文件表——您已经定义了一个/static URL，但没有在同一行放置一个目录来说明@987654322 下的文件位置@ 应该来自。

【讨论】：