Django REST Framework接口功能正常但页面样式异常求助

• 静态资源路径错误
  本地开发时相对路径可能正常，但线上部署后（比如部署在子域名、反向代理后的路径下），相对路径无法正确解析到静态资源。检查HTML中CSS/JS的引用路径：

  • 把相对路径改为根路径开头的绝对路径，比如将 <link rel="stylesheet" href="css/main.css"> 改为 <link rel="stylesheet" href="/css/main.css">
  • 如果项目部署在子目录（如https://example.com/api-app/），需在HTML头部配置<base href="/api-app/">，确保资源路径正确拼接

• 服务器未配置静态资源托管
  很多API框架默认只处理接口请求，不会托管静态文件，需要手动配置：

  • 若用Express(Node.js)，添加静态资源托管中间件：

    const express = require('express');
    const app = express();
    // 托管public目录下的静态资源
    app.use(express.static('public'));
    

  • 若用Nginx部署，需在配置文件中添加静态资源路由：

    location ~* \.(css|js|png|jpg)$ {
        root /var/www/your-project-dir;
        expires 1h;
    }
    

• 静态资源权限或上传问题

  • 检查线上服务器的静态资源文件权限，确保浏览器可读取：执行 chmod -R 644 /path/to/static-files 和 chmod -R 755 /path/to/static-dirs
  • 确认所有CSS/JS文件已完整上传到服务器，避免漏传静态资源目录

• 缓存干扰
  浏览器缓存了旧的无样式页面，按Ctrl+F5强制刷新页面，或清除浏览器缓存后重试

关于配置修改 #

绝大多数情况下需要调整服务器静态资源托管配置或项目资源路径配置，这是此类问题的核心解决点。

类似问题情况 #

很多开发者首次部署前后端一体的API项目时都会遇到这个问题，最常见的诱因就是静态资源路径错误和服务器未配置静态资源托管。

内容的提问来源于stack exchange，提问作者Sebastian Presno Alvarado