HTTP 404错误，Django和Gunicorn中的CSS和JavaScript文件

huangapple
go评论108阅读模式
英文:

HTTP 404 error for css and javascript files in Django and Gunicorn

问题

实际错误是

  1. 因为其MIME类型（'text/html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查，所以拒绝应用来自'http://127.0.0.1:8000/static/css/home.css'的样式。
  2. GET http://127.0.0.1:8000/static/js/home.js net::ERR_ABORTED 404（未找到）

当我开始使用Gunicorn作为应用服务器时，出现了这个错误。有关CSS的第一个错误是一个误导。文件一开始就找不到。
Chrome开发者工具显示

  1. 请求URL：http://127.0.0.1:8000/static/css/home.css
  2. 请求方法：GET
  3. 状态代码：404 未找到
  4. 引荐者策略：same-origin
  5. 连接：关闭
  6. 内容长度：8559
  7. 内容类型：text/html
  8. 日期：2023年6月7日 19:32:29 GMT
  9. 引荐者策略：same-origin
  10. 服务器：gunicorn

状态代码。我看到所有CSS和JavaScript文件的状态代码都相同。

以下是我的相关设置

settings.py

  1. INSTALLED_APPS = [
  2.     .
  3.     .
  4.     'django.contrib.staticfiles',
  5.     'bootstrap4',
  6.     .
  7.     .
  8. ]
  10. STATICFILES_DIRS = [
  11.     os.path.join(BASE_DIR, "kubera/static"),
  12. ]
  14. STATIC_URL = '/static/'
  16. STATIC_ROOT = os.path.join(BASE_DIR, "static")
  18. import mimetypes
  19. mimetypes.add_type("text/css", ".css", True)

manage.py collectstatic命令正确复制了文件

  1. ~/workspace/djangoapp/src$ python3 manage.py collectstatic
  2. 161个静态文件已复制到'/home/<myhomedir>/workspace/djangoapp/src/static'。

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.     {% load static %}
  7.     {% load bootstrap4 %}
  8.     {% bootstrap_css %}
  9.     {% bootstrap_javascript jquery='full' %}
  10.     {% bootstrap_messages %}
  11.     <link href="{% static 'css/home.css' %}"
  12.       type="text/css" rel="stylesheet">
  14.     <title>{% block title %}Parier Config Central {% endblock %}</title>
  15.   </head>
  16.   <body>
  17.     <main>
  18.       <div class="container-fluid headDiv">
  19.         主要div内容在此显示
  20.       </div>
  21.     </main>
  22.     <script type="text/javascript" src="{% static 'js/home.js' %}"></script>
  23.     <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
  24.   </body>
  25. </html>

我可以看到所有的HTML内容都正确。在服务器端控制台上，我看到以下错误调试消息

  1. ~/workspace/djangoapp/src$ gunicorn --bind 127.0.0.1:8000 <myappname>.wsgi
  2. [2023-06-07 12:32:24 -0700] [68057] [INFO] 启动gunicorn 20.1.0
  3. [2023-06-07 12:32:24 -0700] [68057] [INFO] 在：http://127.0.0.1:8000 (68057)上听取
  4. [2023-06-07 12:32:24 -0700] [68057] [INFO] 使用worker：sync
  5. [2023-06-07 12:32:24 -0700] [68058] [INFO] 使用pid引导工作：68058
  6. 未找到：/static/css/home.css
  7. 未找到：/static/js/home.js
  8. 未找到：/static/js/main.js
  9. 未找到：/static/images/BlankPicture.png
  10. 未找到：/static/css/home.css
  11. 未找到：/favicon.ico

编辑： Gunicorn套接字和服务配置
/etc/systemd/system/gunicorn.socket

  1. [Unit]
  2. Description=gunicorn套接字
  4. [Socket]
  5. ListenStream=/run/gunicorn.sock
  7. [Install]
  8. WantedBy=sockets.target

/etc/systemd/system/gunicorn.socket

  1. [Unit]
  2. Description=gunicorn守护进程
  3. Requires=gunicorn.socket
  4. After=network.target
  6. [Service]
  7. User=<username>
  8. Group=<usergroup>
  9. WorkingDirectory=/绝对路径到您的wsgi文件目录
  10. ExecStart=/usr/local/bin/gunicorn \
  11.           --access-logfile - \
  12.           --workers 3 \
  13.           --bind unix:/run/gunicorn.sock \
  14.           <projectname>.wsgi:application
  16. [Install]
  17. WantedBy=multi-user.target

配置好gunicorn套接字和服务后，启动它们。

  1. ~/workspace/djangoapp/src$ sudo systemctl start gunicorn.socket
  2. ~/workspace/djangoapp/src$ sudo systemctl enable gunicorn.socket
  3. ~/workspace/djangoapp/src$ sudo systemctl status gunicorn.socket
  4. ~/workspace/djangoapp/src$ sudo systemctl daemon-reload
  5. ~/workspace/djangoapp/src$ sudo systemctl restart gunicorn

NGINX配置文件
/etc/nginx/sites-available/

  1. server {
  2.     listen 80;
  3.     server_name 127.0.0.1;
  5.     location = /favicon.ico { access_log off; log_not_found off; }
  6.     location /static/ {
  7.         root /静态目录的父目录的绝对路径;
  8.     }
  10.     location / {
  11.         include proxy_params;
  12.         proxy_pass http://unix:/run/gunicorn.sock;
  13.     }
  14. }

启用您的应用程序

  1. sudo ln -s /etc/nginx/sites-available/<app-name> /etc/nginx/sites-enabled/
英文:

The actual error is

  1. Refused to apply style from &#39;http://127.0.0.1:8000/static/css/home.css&#39; because its MIME type (&#39;text/html&#39;) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
  2. GET http://127.0.0.1:8000/static/js/home.js net::ERR_ABORTED 404 (Not Found)

This error started happening when I started using Gunicorn as app server. The first error for css is a misdirection. The file was not found to begin with.
Chrome developer tools shows

  1. Request URL:http://127.0.0.1:8000/static/css/home.css
  2. Request Method:GET
  3. Status Code:404 Not Found
  4. Referrer Policy:same-origin
  5. Connection:close
  6. Content-Length:8559
  7. Content-Type:text/html
  8. Date:Wed, 07 Jun 2023 19:32:29 GMT
  9. Referrer-Policy:same-origin
  10. Server:gunicorn

status code. I see the same status code for all the css and javascript files.

Here are my relevant settings

settings.py

  1. INSTALLED_APPS = [
  2.     .
  3.     .
  4.     &#39;django.contrib.staticfiles&#39;,
  5.     &#39;bootstrap4&#39;,
  6.     .
  7.     .
  8. ]
  10. STATICFILES_DIRS = [
  11.     os.path.join(BASE_DIR, &quot;kubera/static&quot;),
  12. ]
  14. STATIC_URL = &#39;/static/&#39;
  16. STATIC_ROOT = os.path.join(BASE_DIR, &quot;static&quot;)
  18. import mimetypes
  19. mimetypes.add_type(&quot;text/css&quot;, &quot;.css&quot;, True)

manage.py collectstatic command copied the files correctly

  1. ~/workspace/djangoapp/src$ python3 manage.py collectstatic
  2. 161 static files copied to &#39;/home/&lt;myhomedir&gt;/workspace/djangoapp/src/static&#39;.

index.html

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3.   &lt;head&gt;
  4.     &lt;meta charset=&quot;utf-8&quot;&gt;
  5.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
  6.     {% load static %}
  7.     {% load bootstrap4 %}
  8.     {% bootstrap_css %}
  9.     {% bootstrap_javascript jquery=&#39;full&#39; %}
  10.     {% bootstrap_messages %}
  11.     &lt;link href=&quot;{% static &#39;css/home.css&#39; %}&quot;
  12.       type=&quot;text/css&quot; rel=&quot;stylesheet&quot;&gt;
  14.     &lt;title&gt;{% block title %}Parier Config Central {% endblock %}&lt;/title&gt;
  15.   &lt;/head&gt;
  16.   &lt;body&gt;
  17.     &lt;main&gt;
  18.       &lt;div class=&quot;container-fluid headDiv&quot;&gt;
  19.         Main div content shown here
  20.       &lt;/div&gt;
  21.     &lt;/main&gt;
  22.     &lt;script type=&quot;text/javascript&quot; src=&quot;{% static &#39;js/home.js&#39; %}&quot;&gt;&lt;/script&gt;
  23.     &lt;script type=&quot;text/javascript&quot; src=&quot;{% static &#39;js/main.js&#39; %}&quot;&gt;&lt;/script&gt;
  24.   &lt;/body&gt;
  25. &lt;/html&gt;

I can see all the html content correctly. On the server side console, I see following error debug messages

  1. ~/workspace/djangoapp/src$ gunicorn --bind 127.0.0.1:8000 &lt;myappname&gt;.wsgi
  2. [2023-06-07 12:32:24 -0700] [68057] [INFO] Starting gunicorn 20.1.0
  3. [2023-06-07 12:32:24 -0700] [68057] [INFO] Listening at: http://127.0.0.1:8000 (68057)
  4. [2023-06-07 12:32:24 -0700] [68057] [INFO] Using worker: sync
  5. [2023-06-07 12:32:24 -0700] [68058] [INFO] Booting worker with pid: 68058
  6. Not Found: /static/css/home.css
  7. Not Found: /static/js/home.js
  8. Not Found: /static/js/main.js
  9. Not Found: /static/images/BlankPicture.png
  10. Not Found: /static/css/home.css
  11. Not Found: /favicon.ico

Edit: Gunicorn socket and service configuration
/etc/systemd/system/gunicorn.socket

  1. [Unit]
  2. Description=gunicorn socket
  4. [Socket]
  5. ListenStream=/run/gunicorn.sock
  7. [Install]
  8. WantedBy=sockets.target

/etc/systemd/system/gunicorn.socket

  1. [Unit]
  2. Description=gunicorn daemon
  3. Requires=gunicorn.socket
  4. After=network.target
  6. [Service]
  7. User=&lt;username&gt;
  8. Group=&lt;usergroup&gt;
  9. WorkingDirectory=/absolute-path-to-your-wsgi-file-directory
  10. ExecStart=/usr/local/bin/gunicorn \
  11.           --access-logfile - \
  12.           --workers 3 \
  13.           --bind unix:/run/gunicorn.sock \
  14.           &lt;projectname&gt;.wsgi:application
  16. [Install]
  17. WantedBy=multi-user.target

Once you have configured the gunicorn socket and service, start them.

  1. ~/workspace/djangoapp/src$sudo systemctl start gunicorn.socket
  2. ~/workspace/djangoapp/src$sudo systemctl enable gunicorn.socket
  3. ~/workspace/djangoapp/src$sudo systemctl status gunicorn.socket
  4. ~/workspace/djangoapp/src$sudo systemctl daemon-reload
  5. ~/workspace/djangoapp/src$sudo systemctl restart gunicorn

NGINX config file
/etc/nginx/sites-available/<app-name>

  1. server {
  2.     listen 80;
  3.     server_name 127.0.0.1;
  5.     location = /favicon.ico { access_log off; log_not_found off; }
  6.     location /static/ {
  7.         root /absolute-path-to-the-parent-of-static-directory;
  8.     }
  10.     location / {
  11.         include proxy_params;
  12.         proxy_pass http://unix:/run/gunicorn.sock;
  13.     }
  14. }

Enable your app

  1. sudo ln -s /etc/nginx/sites-available/&lt;app-name&gt; /etc/nginx/sites-enabled/

答案1

得分: 0

这个回答是给像我这样的新手。我只使用了 Django 和 Gunicorn。我没有任何 web 服务器。Django 不提供静态文件服务。Gunicorn 是一个应用服务器，也不提供静态文件服务。你必须有像 NGINX 这样的 web 服务器来提供静态文件服务。一旦我启动了 NGINX，一切都开始正常运作。我将在我的原始问题中更新 Gunicorn 和 Nginx 的设置，以便其他人可以快速参考设置。

英文:

This answer is for noobs like me.
I only had Django up with Gunicorn. I didn't have any web-server. Django doesn't serve static files. Gunicorn is an app server and doesn't serve static files either. You must have a web-server like NGINX to serve the static files.
Everything started to work as soon as I brought up NGINX. I am going to update my original question with Gunicorn and Nginx settings in case someone wants a quick settings reference.

huangapple
  • 本文由 发表于 2023年6月8日 04:34:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/76426938.html
  • django
  • django-staticfiles
  • gunicorn
  • nginx
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定