【发布时间】：2021-01-24 05:29:49
【问题描述】：
我以前使用过 PythonAnywhere，但这是第一个使用 Django 后端和 React 前端的项目。奇怪的是，如果我在 localhost 上运行这个确切的项目，完全没有问题。只有当我在 PythonAnywhere 上托管此网站时才会收到此错误。
他们可能很难看到......
Refused to apply style from 'http://bluebirdteaching.pythonanywhere.com/static/css/2.8aa5a7f8.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
查找此内容，我经常遇到this 页面，但我似乎无法理解那里提供的答案。我只是不明白为什么这适用于 localhost，但不适用于 PythonAnywhere。
我包含上面的图像不仅是为了显示我的 index.html，还为了显示项目目录，因为这似乎是必要的，正如链接的其他帖子所解释的那样。如果我正在寻找的答案在其他帖子中，我就是无法理解它。
再次，当我在本地运行项目时，一切都按预期工作。当然，谢谢大家的帮助。我已经解决这个问题一段时间了；任何帮助/解释都将是一个巨大的解脱。
编辑：这是我在npm run build 时生成的index.html 文件。这是所有这些 chunk.css 和 chunk.js 被引用的地方。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="/logo192.png"/>
<link rel="manifest" href="/manifest.json"/>
<title>BlueBird Teaching</title>
<link href="/static/css/2.f3cffc9e.chunk.css" rel="stylesheet">
<link href="/static/css/main.aa904fbe.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],f=r[2],c=0,s=[];c<p.length;c++)a=p[c],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(i&&i(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this.webpackJsonpreactapp=this.webpackJsonpreactapp||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var f=0;f<p.length;f++)r(p[f]);var i=l;t()}([])</script>
<script src="/static/js/2.f7026f3a.chunk.js"></script>
<script src="/static/js/main.f2b0e582.chunk.js"></script>
</body>
</html>
解决方案
它在本地工作但不能在 Heroku 或 PythonAnywhere 上工作的原因只是因为我需要为静态文件设置映射。从字面上看，我需要做的就是python3 manage.py collectstatic。
【问题讨论】：
-
您是否设置了static file mapping 来提供您的 JS 和 CSS 文件？
标签： css reactjs django stylesheet pythonanywhere