PythonAnywhere 上的 Django/React 项目 MIME 类型错误

问题描述 投票：0回答：4

我以前使用过 PythonAnywhere，但这是第一个使用 Django 后端和 React 前端的项目。奇怪的是，如果我在本地主机上运行这个确切的项目，则完全没有问题。只有当我在 PythonAnywhere 上托管此网站时，我才会收到此错误。

他们可能很难看到...

拒绝应用“http://bluebirdteaching.pythonanywhere.com/static/css/2.8aa5a7f8.chunk.css”中的样式，因为其 MIME 类型（“text/html”）不是受支持的样式表 MIME 类型，并且严格的 MIME检查已启用。

查找此内容，我经常遇到this页面，但我似乎无法理解那里提供的答案。我只是不明白为什么这在本地主机上有效，但在 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>
css reactjs django pythonanywhere
4个回答
0
投票

您链接到的 SO 帖子中的建议之一是，您实际上可能不是在提供 CSS，而是可能在提供 HTML。您是否在浏览器中加载了 css 页面以查看从该 URL 返回的内容？

0
投票

显示mime类型错误的原因是，staticfiles_dirs不包含src文件夹，如果src内有图像，则在collectstatic过程中不会包含在staticfiles文件夹中，因此会抛出错误。

因此请确保不要在 src 或 public 中使用导入图像，而是托管它们。

0
投票

将解决方案从问题迁移到答案：

它在本地工作但不能在 Heroku 或 PythonAnywhere 上工作的原因是因为我需要为静态文件设置映射。我所需要做的就是运行

python3 manage.py collectstatic
。

0
投票

这对我有用，

  1. 在settings.py中添加这些

    # URL path where static files will be served from.
STATIC_URL = '/static/'

# Define the directory where Django will collect static files during production.
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

# Additional directories where Django will look for static files.
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend', 'build', 'static'),
]

WHITENOISE_MIMETYPES = {
    '.css': 'text/css',
    '.js': 'text/javascript'
}

  2. 考虑到您的 React 应用程序构建在 frontend/build/ 中。 在这个文件夹中，将有一个 static/ 文件夹和一些文件。这些文件也应该存在于 frontend/public/ 文件夹中

  3. 然后你应该在虚拟环境中运行collect static命令

    python manage.py collectstatic

  4. 将staticfiles/文件夹的内容复制到frontend/build/static/

因此您的 frontend/build/static/ 文件夹应该包含以下创建的文件夹，

npm run build

以及静态文件/文件夹的内容

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.