Nginx无法转发请求至DRF后端，Vue拦截/admin等路径问题

问题根源分析 #

你的Nginx配置存在两个关键问题：

• 语法错误：ssl_ciphers行末尾的>是非法字符，导致Nginx无法正确解析整个server块配置，后续的/admin/和/api/转发规则根本没生效，所有请求都默认匹配到Vue的index.html。
• 缺少单页应用兜底规则：Vue作为单页应用，需要明确配置兜底路由来处理非API、非Admin的请求，确保前端路由正常工作。

修正后的完整Nginx配置 #

server {
    listen 80;
    server_name mywebsite.com www.mywebsite.com;

    # Redirect all HTTP traffic to HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    server_name mywebsite.com www.mywebsite.com;

    # SSL configuration
    ssl_certificate /etc/letsencrypt/live/mywebsite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mywebsite.com/privkey.pem;

    # Optional security settings
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers off;
    ssl_ciphers "FHFHFOK-JDJFFJKKFF-JFDJFFKFKFK";  # 修复结尾的>为;

    # 转发Django admin请求
    location /admin/ {
        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-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 处理静态文件
    location /static/ {
        alias /var/www/mywebsite/blogproject/staticfiles/;
    }

    # 转发DRF API请求
    location /api/ {
        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-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Vue单页应用兜底路由，必须放在所有特定location之后
    root /var/www/mywebsite/dist;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

操作步骤 #

1. 将原配置文件替换为上述修正后的内容，重点确认ssl_ciphers行的语法和兜底路由的位置。
2. 验证Nginx配置合法性：

   sudo nginx -t
   

   输出显示test is successful即为配置有效。
3. 重启Nginx服务生效：

   sudo systemctl restart nginx
   

验证结果 #

• 访问https://mywebsite.com/api/posts，应返回DRF的空数组响应
• 访问https://mywebsite.com/admin，应跳转至Django管理登录页面
• 其他路径正常加载Vue前端页面

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