Nginx切换HTTP为HTTPS后visoon.de无法连接的问题求助

我有一个基于Flutter前端和Django后端的项目，原本运行正常。在将协议从HTTP改为HTTPS后，出现了「This site can’t be reached domain.de refused to connect」的错误。

前端Nginx配置 #

server {
        server_name visoon.de;
        root /home/visoon_frontend/build/web;
        index index.html;
    listen 443 ssl; 
    ssl_certificate /etc/letsencrypt/live/visoon.de/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/visoon.de/privkey.pem; 
    include /etc/letsencrypt/options-ssl-nginx.conf; 
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}
server {
    if ($host = visoon.de) {
        return 301 https://$host$request_uri;
    } 
        listen 80;
        server_name visoon.de;
    return 404; 
}

后端Nginx配置 #

upstream visoon_app_server {
  server unix:/home/visoon_backend/run/gunicorn.sock fail_timeout=0;
}

server {
    listen   80;
    server_name visoon.de;
    client_max_body_size 4G;
    proxy_read_timeout 1200s;
    access_log /home/visoon_backend/logs/nginx-access.log;
    error_log /home/visoon_backend/logs/nginx-error.log;
    location /static/ {
        alias   /home/visoon_backend/visoon_backend/static/;
        expires -1;
    }
    location /media/ {
        alias   /home/visoon_backend/visoon_backend/static/media/;
        expires -1;
    }
    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        # proxy_buffering off;
        if (!-f $request_filename) {
            proxy_pass http://visoon_app_server;
            break;
        }
    }

    # Error pages
    error_page 500 502 503 504 /500.html;
    location = /500.html {
        root /home/visoon_backend/visoon_backend/static/;
    }
}

错误原因分析及解决方法 #

核心问题 #

1. Nginx配置冲突：前后端两个独立的Nginx配置都使用server_name visoon.de，后端仍监听80端口，导致端口被重复占用，请求路由混乱，HTTPS请求无法正确分发。
2. 未统一HTTPS配置：后端没有HTTPS支持，当前端以HTTPS运行时，浏览器会阻止HTTPS页面发起HTTP请求（混合内容安全限制），直接导致接口连接失败。
3. Flutter单页路由缺失：前端配置未处理单页应用路由重写，虽不是当前连接错误的主因，但会引发后续页面刷新问题。

解决步骤 #

1. 合并前后端Nginx配置

将前端静态文件、后端接口及HTTPS配置整合到同一个server块，避免冲突。示例配置如下：

upstream visoon_app_server {
  server unix:/home/visoon_backend/run/gunicorn.sock fail_timeout=0;
}

server {
    server_name visoon.de;
    root /home/visoon_frontend/build/web;
    index index.html;

    listen 443 ssl; 
    ssl_certificate /etc/letsencrypt/live/visoon.de/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/visoon.de/privkey.pem; 
    include /etc/letsencrypt/options-ssl-nginx.conf; 
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # 处理Flutter单页应用路由，避免刷新页面404
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 后端API接口路由（前缀可根据实际调整）
    location /api/ {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Proto $scheme; # 告知后端当前使用HTTPS
        proxy_redirect off;
        proxy_pass http://visoon_app_server;
    }

    # 后端静态资源
    location /static/ {
        alias   /home/visoon_backend/visoon_backend/static/;
        expires -1;
    }

    # 后端媒体资源
    location /media/ {
        alias   /home/visoon_backend/visoon_backend/static/media/;
        expires -1;
    }

    # 错误页面配置
    error_page 500 502 503 504 /500.html;
    location = /500.html {
        root /home/visoon_backend/visoon_backend/static/;
    }
}

# HTTP重定向到HTTPS
server {
    if ($host = visoon.de) {
        return 301 https://$host$request_uri;
    } 
    listen 80;
    server_name visoon.de;
    return 404; 
}

2. 检查端口与Nginx状态

• 执行命令检查端口占用：

  sudo lsof -i :443
  sudo lsof -i :80
  

  确保无其他进程占用端口。
• 重启Nginx加载新配置：

  sudo systemctl stop nginx
  sudo systemctl start nginx
  

3. 更新前端API请求地址

修改Flutter项目中API基础地址，从http://visoon.de改为https://visoon.de/api/，避免浏览器拦截混合内容请求。

4. 验证SSL证书有效性

执行命令确认证书状态：

sudo certbot certificates

确保证书路径正确，且Nginx有权限读取证书文件（建议权限设置为root:root，权限值600）。

内容的提问来源于stack exchange，提问作者Davood