在 Django REST + Angular2 中解释 CSS 资源时出错

Question

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

Resource interpreted as Stylesheet but transferred with MIME type text/html

我不知道为什么会这样。在本地主机上一切正常。

完整堆栈跟踪：

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/node_modules/bootstrap/dist/css/bootstrap.min.css". rodion.pythonanywhere.com/:12 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/bower_components/alertify.js/themes/alertify.core.css". rodion.pythonanywhere.com/:13 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/bower_components/alertify.js/themes/alertify.bootstrap.css". rodion.pythonanywhere.com/:14 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/styles.css". rodion.pythonanywhere.com/:24 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/libs/fancybox/source/jquery.fancybox.css". rodion.pythonanywhere.com/:28 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/libs/fancybox/source/helpers/jquery.fancybox-buttons.css". rodion.pythonanywhere.com/:32 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/libs/fancybox/source/helpers/jquery.fancybox-thumbs.css". rodion.pythonanywhere.com/:11 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://rodion.pythonanywhere.com/static/bower_components/font-awesome/css/font-awesome.min.css". jquery.min.js:1 Uncaught SyntaxError: Unexpected token < jquery.mousewheel-3.0.6.pack.js:1 Uncaught SyntaxError: Unexpected token < jquery.fancybox.pack.js:1 Uncaught SyntaxError: Unexpected token < jquery.fancybox-buttons.js:1 Uncaught SyntaxError: Unexpected token < jquery.fancybox-media.js:1 Uncaught SyntaxError: Unexpected token < jquery.fancybox-thumbs.js:1 Uncaught SyntaxError: Unexpected token < bootstrap.min.js:1 Uncaught SyntaxError: Unexpected token < alertify.min.js:1 Uncaught SyntaxError: Unexpected token < shim.min.js:1 Uncaught SyntaxError: Unexpected token < zone.js:1 Uncaught SyntaxError: Unexpected token < Reflect.js:1 Uncaught SyntaxError: Unexpected token < system.src.js:1 Uncaught SyntaxError: Unexpected token < systemjs.config.js:1 Uncaught SyntaxError: Unexpected token < (index):51 Uncaught ReferenceError: System is not defined(…)(anonymous function) @ (index):51

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>

Answer 1

PythonAnywhere 开发人员：当我访问其中任何一个 URL 时，提供的内容看起来像 HTML 而不是 CSS。查看您的 Web 应用程序设置，您似乎还没有完全设置静态文件 table——您已经定义了一个 /static URL，但还没有将目录放在同一行表示 /static 下的文件应该从哪里提供。

在 Django REST + Angular2 中解释 CSS 资源时出错

error with interpretation of CSS resources in Django REST + Angular2

django

angular

deployment

pythonanywhere