同一服务器配置Nginx适配Vue.js与DRF后端/api路径问题求助

一、优先排查500错误根源 #

你当前遇到的NameError: name 'token' is not defined是Django服务层抛出的错误，Nginx已经成功将请求转发到后端Gunicorn服务，不存在转发规则失效的问题。本地运行正常、线上报错的常见原因如下：

• 线上环境未同步完整的项目配置项：比如JWT密钥、邮件服务参数、第三方服务token等写在本地.env文件中的配置，线上未配置或漏填，代码中直接读取未做判空处理就会触发该报错
• Django配置项不符合线上环境要求：ALLOWED_HOSTS未添加172.16.7.52、DEBUG模式关闭后未配置静态资源访问权限等
• 邮件发送失败同理：线上未配置SMTP服务的账号、密码、端口、SSL参数，本地使用的是测试邮件后端，线上切换正式配置后参数缺失

建议优先查看Gunicorn运行日志定位具体报错代码行，日志可通过journalctl -u 你的Gunicorn服务名或项目配置的日志目录查看。

二、最优Nginx配置方案 #

你之前添加/api/路径规则后应用无法访问，是因为路由匹配优先级设置错误，推荐两种配置方案按需选择：

方案1：前后端统一端口访问（推荐） #

合并前后端配置，统一用80端口提供服务，无需区分端口访问，避免跨域问题。
直接在/etc/nginx/sites-available/下新建perulab配置文件，内容如下：

# 后端Gunicorn上游配置
upstream perulab_app_server {
    server unix:/webapps/perulab/venv/run/gunicorn.sock fail_timeout=0;
}

server {
    listen 80;
    listen [::]:80;
    server_name 172.16.7.52;
    charset utf-8;
    client_max_body_size 4G;

    # 前端静态资源根目录
    root /webapps/perulab/web-frontend/dist;
    index index.html index.htm;

    # 后端接口、管理后台转发规则
    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;
        proxy_redirect off;
        proxy_pass http://perulab_app_server;
    }

    location ^~ /admin/ {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;
        proxy_pass http://perulab_app_server;
    }

    # 后端静态、媒体资源规则
    location /static/ {
        root /webapps/perulab/web-backend;
        try_files $uri $uri/ =404;
    }

    location /media/ {
        root /webapps/perulab/web-backend;
        try_files $uri $uri/ =404;
    }

    # 前端路由兜底
    location / {
        try_files $uri /index.html;
    }
}

配置生效步骤：

1. 执行ln -s /etc/nginx/sites-available/perulab /etc/nginx/sites-enabled/创建软链
2. 执行nginx -t检查配置语法是否正确
3. 执行systemctl reload nginx重载配置
   后续直接访问http://172.16.7.52即可打开前端，/api/前缀的请求会自动转发到后端服务。

方案2：保留前后端分端口配置 #

如果需要保留8000（后端）、8010（前端）的端口划分，只需在原前端配置中添加/api/路径的转发规则即可：
修改原8010端口的前端配置文件：

server {
    listen 8010;
    listen [::]:8010;
    server_name _;
    charset utf-8;
    root /webapps/perulab/web-frontend/dist;
    index index.html index.htm;

    # 新增api路径转发规则
    location ^~ /api/ {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://127.0.0.1:8000;
    }

    location / {
        try_files $uri /index.html;
    }
}

重载Nginx配置后即可生效。

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