带有 nginx 的 FastAPI 不在 HTTPS 中提供静态文件

Question

我有一个小型的测试 FastAPI Web 应用程序，它提供一个简单的 HTML 页面，该页面需要位于静态文件夹中的 css 样式表。它安装在 Linode 服务器（Ubuntu 20.04 LTS）、nginx、gunicorn、uvicorn workers 和 supervisorctl 上。我已经使用 certbot 添加了一个证书。

该应用程序在 http 中运行良好，但无法访问 https 中的静态文件。在 http 中访问时，所有基于静态的功能都有效，但在使用 https 访问时，它缺少 css 样式表中的所有样式。我需要让它工作，这样我才能加载一个需要 css 和其他静态文件夹存储功能的更复杂的应用程序。

文件结构为：

/home/<user_name>/application
- main.py
- static
   |_ css
   |_ bootstrap
- templates
   |_ index.html

main.py:

import fastapi
import uvicorn
from fastapi import Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates


api = fastapi.FastAPI()

api.mount('/static', StaticFiles(directory='static'), name='static')
templates = Jinja2Templates(directory="templates")


@api.get('/')
@api.get('/index', response_class=HTMLResponse)
def index(request: Request):
    message = None
    return templates.TemplateResponse("index.html", {"request": request,
        'message': message})


if __name__ == '__main__':
    uvicorn.run(api, port=8000, host='127.0.0.1')

nginx 位于 /etc/nginx/sites-enabled/.nginx

server {
    listen 80;
    server_name www.<my_url>.com <my_url>.com;
    server_tokens off;
    charset utf-8;

    location / {
        try_files $uri @yourapplication;
    }

    location /static {
        gzip            on;
        gzip_buffers    8 256k;

        alias /home/<user_name>/application/static;
        expires 365d;
    }


    location @yourapplication {
        gzip            on;
        gzip_buffers    8 256k;

        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Protocol $scheme;
    }
  }

server {
    listen              443 ssl;
    server_name         www.<my_url>.com;
    ssl_certificate /etc/letsencrypt/live/<my_url>.com/fullchain.pem; # mana>
    ssl_certificate_key /etc/letsencrypt/live/<my_url>.com/privkey.pem; # ma>
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location / {
        try_files $uri @yourapplication;
    }

  location /static {
        gzip            on;
        gzip_buffers    8 256k;

        alias /home/<user_name>/application/static;
        expires 365d;
    }

    location @yourapplication {
        gzip            on;
        gzip_buffers    8 256k;

        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Protocol $scheme;
    }
}

并且正在使用主管脚本提供服务：

[program:api]
directory=/home/<user_name>/application
command=gunicorn -b 127.0.0.1:8000 -w 4 -k uvicorn.workers.UvicornWorker main:api
environmentenvironment=PYTHONPATH=1
autostart=true
autorestart=true
stopasgroup=true
killasgroup=true
stderr_logfile=/var/log/app/app.err.log
stdout_logfile=/var/log/app/app.out.log

使用 url_for 在 html 中调用 css 样式表，如下所示：

<link href="{{ url_for('static', path='/css/ATB_style.css') }}" rel="stylesheet">

我已尝试对 nginx 中的 location /static 块进行大量修改，包括：

• 在任一行或两行的静态后添加斜杠
• 尝试添加 https://static 或 https://www..com/home//application/static
• 在 http 和 https 行中添加和删除静态位置
• 将 proxy_pass 更改为 https://127.0.0.1:8000;
• 将根 /home//application 添加到服务器部分

我已经加载了这个服务器两次，一次是让 certbot 修改 nginx 文件，第二次是我手动完成的当前配置。我完全不知道该怎么做。

Answer 1

感谢 @AdramKhan 为重要演示提供解决方法的评论。我在我的 html 页面中添加了一个元行，以允许使用 https 访问 css 样式表：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

这只是一种解决方法，因为它正在处理代码中某处的硬编码 HTTP 请求：How can I allow Mixed contents (http with https) using content-security-policy meta tag?

解决根本原因是改变在 html 文件头部调用静态内容的方式。问题（有三个）与这样的引用有关，其中有一个 jinja2 url_for 而不是直接的 href：

<link href="{{ url_for('static', path='/css/MH_style.css') }}" rel="stylesheet">

当替换为这种格式的引用时，使用 href:

<link rel="stylesheet" href="/static/css/MH_style.css"/>

没有 Content-Security-Policy 元数据一切正常。

Answer 2

我认为您希望服务器处理它。如果您只是在端口 80 上设置一个单独的块以将所有请求永久转换为 443 (HTTPS)，那么您会很好：

server {
    listen 80;
    server_name yourserver.com;
    return 301 https://yourserver.com$request_uri;
}

server {
    listen 443 ssl http2;
    server_name yourserver.com;
    ...
}```

Answer 3

如果使用upstream，proxy_pass也应该设置如下：

http {
    upstream myapp {
        server application_container:4001;
    }

    server {

        listen 80;
        server_name localhost;

        location / {
            ...
        }

        location /myapp/ {
                proxy_pass http://myapp;
                ...
        }

        location /static/ {
            proxy_pass http://myapp;
            alias ...
        }
}