网罗开发小红书、快手、视频号同名大家好我是展菲目前在上市企业从事人工智能项目研发管理工作平时热衷于分享各种编程领域的软硬技能知识以及前沿技术包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者《ESP32-C3 物联网工程开发实战》图书作者《SwiftUI 入门进阶与实战》超级个体COC上海社区主理人特约讲师大学讲师谷歌亚马逊分享嘉宾科技博主华为HDE/HDG我的博客内容涵盖广泛主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告同时也会提供产品优缺点分析、横向对比并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。展菲您的前沿技术领航员 大家好我是展菲 全网搜索“展菲”即可纵览我在各大平台的知识足迹。 公众号“Swift社区”每周定时推送干货满满的技术长文从新兴框架的剖析到运维实战的复盘助您技术进阶之路畅通无阻。 微信端添加好友“fzhanfei”与我直接交流不管是项目瓶颈的求助还是行业趋势的探讨随时畅所欲言。 最新动态2025 年 3 月 17 日快来加入技术社区一起挖掘技术的无限潜能携手迈向数字化新征程文章目录前言整体架构基础 server 与静态资源反向代理 /api 到 Python 后端路径是否带 /api 的两种写法超时与 body 大小HTTPS 与 80 跳转常见问题总结前言前后端分离项目里前端通常是 React 打包后的静态资源后端是 PythonFastAPI/Flask提供的 API。生产环境一般用 Nginx 做统一入口对外只暴露 80/443静态资源由 Nginx 直接返回/api等路径转发到后端进程这样既能隐藏后端端口、又便于做 HTTPS 和缓存。本文只讲 Nginx 反向代理的核心配置思路和关键片段不贴完整可运行 Demo便于快速接入和排查问题。整体架构客户端 → Nginx:80/443 ├── / → 静态资源React build 目录 └── /api → 反向代理到 Python 后端如 127.0.0.1:8000前端npm run build后得到build或dist目录配置 Nginx 的root指向该目录。后端用 Gunicorn/Uvicorn 监听本机端口如 8000只对本机开放Nginx 用proxy_pass把/api转到该端口。基础 server 与静态资源在 Nginx 的conf.d或sites-available下新建一个server块例如server { listen 80; server_name your-domain.com; # 前端静态资源 root /var/www/app/frontend/build; index index.html; location / { try_files $uri $uri/ /index.html; } }要点root指向 React 打包后的目录请求/或/xxx时Nginx 会先找对应文件找不到再找目录最后回退到index.html这样前端的 React Router 才能正确处理浏览器直接访问或刷新子路径。try_files$uri表示先找同名文件$uri/表示找同名目录下的默认页最后/index.html交给 SPA 自己路由。反向代理 /api 到 Python 后端在同一个server里增加location /apilocation /api { proxy_pass http://127.0.0.1:8000; proxy_http_version 1.1; 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; }要点proxy_pass后端实际监听地址若后端是http://127.0.0.1:8000且后端路由是/api/xxx这里写http://127.0.0.1:8000即可若后端根路径是/则前端应请求/api/xxxNginx 会把/api/xxx原样转给后端后端需挂载在/api下如 FastAPI 的app FastAPI(prefix/api)或做路径重写。X-Forwarded-Proto若前面还有 HTTPS 终结后端需要知道原始协议时设为$scheme后端可信任该头做跳转或生成 URL。Host后端若按 Host 做虚拟主机或校验应传原始 Host。路径是否带 /api 的两种写法方式一前端请求 /api/xxx后端也以 /api 为前缀前端axios.get(/api/users)Nginxlocation /api { proxy_pass http://127.0.0.1:8000; }注意末尾无斜杠转发到后端的请求路径仍是/api/users后端需挂载在/api例如 FastAPIapp FastAPI(prefix/api)方式二后端根路径是 /Nginx 做 stripNginxlocation /api/ { proxy_pass http://127.0.0.1:8000/; }注意两边都有斜杠请求/api/users会被转成http://127.0.0.1:8000/users后端只需挂载/users等路由。按你们前后端约定选一种即可关键是proxy_pass末尾有没有斜杠、以及后端路由前缀要一致。超时与 body 大小若接口有上传或长耗时可适当增大超时和 body 限制location /api { proxy_pass http://127.0.0.1:8000; proxy_connect_timeout 60s; proxy_send_timeout 60s; proxy_read_timeout 60s; client_max_body_size 20M; 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; }HTTPS 与 80 跳转正式环境建议全站 HTTPS。用 Certbot 申请证书后可保留 80 仅做跳转server { listen 80; server_name your-domain.com; return 301 https://$server_name$request_uri; } server { listen 443 ssl; server_name your-domain.com; ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem; root /var/www/app/frontend/build; index index.html; location / { try_files $uri $uri/ /index.html; } 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-Proto $scheme; } }常见问题现象可能原因处理思路刷新子路径 404SPA 未回退到 index.html检查try_files最后是否指向/index.html接口 502后端未启动或端口不对确认 Gunicorn/Uvicorn 监听地址与 proxy_pass 一致接口 404路径前缀不一致对照前端请求路径、Nginx proxy_pass 末尾斜杠、后端 prefix上传大文件失败body 超限或超时增大client_max_body_size与 proxy_*_timeout总结Nginx 反向代理前后端分离项目静态资源用roottry_files指向 React build 目录并回退到index.html/api用proxy_pass转到 Python 后端并设置 Host、X-Real-IP、X-Forwarded-Proto 等头。注意proxy_pass末尾斜杠与后端路由前缀一致按需调整超时与 body 大小生产环境配合 HTTPS 与 80 跳转即可。