深夜痛点浏览器里那一抹“惊艳”的红凌晨三点你眼圈发黑。后端接口在 Postman 里测得好好的返回 200 OK可一到前端页面就卡住。打开浏览器控制台映入眼帘的是一行无情的红色大字Access to XMLHttpRequest at ‘…’ from origin ‘…’ has been blocked by CORS policy…“反向代理配置了啊路径也对了啊为什么还是报 404 或者跨域”张工猛揪了一下头发。在《苍穹外卖》这种前后端分离的项目中Nginx 不仅仅是一个静态服务器更是连接前后的“桥梁”。如果这座桥搭歪了数据永远传不过去。今天我们就来彻底拆解 Nginx 的核心配置。️ 核心概念为什么要用反向代理在开发环境下前端运行在8080 端口后端运行在8081 端口。浏览器出于安全考虑禁止跨域请求。正向代理隐藏客户端如 VPN。反向代理隐藏服务端。前端统一请求 Nginx80端口由 Nginx 根据路径转发给不同的后端服务。核心结论Nginx 的反向代理让我们在前端感官上觉得“只有一个服务器”从而巧妙绕过了浏览器的同源策略。 实战配置苍穹外卖中的 Nginx 落地在《苍穹外卖》的 nginx.conf 中核心配置如下server{listen80;server_name localhost;#1.前端静态资源定位 location/{root html/sky;index index.html index.htm;}#2.反向代理后端接口(关键)location/api/{proxy_pass http://localhost:8081/admin/;# 此时请求 http://localhost/api/employee/login # 会被转发到 http://localhost:8081/admin/employee/login}#3.解决WebSocket跨域用于外卖订单提醒 location/ws/{proxy_pass http://localhost:8081/ws/;proxy_http_version1.1;proxy_set_headerUpgrade$http_upgrade;proxy_set_headerConnectionUpgrade;}} 避坑小贴士proxy_pass 最后的斜杠注意/api/ 匹配后如果 proxy_pass 后面带了路径如 /admin/Nginx 会进行路径替换。这是很多同学配置后报 404 的重灾区 逻辑流程图请求的一生 深度剖析CORS 跨域的底层逻辑虽然反向代理能解决大部分问题但在某些场景下如前端直接请求 OSS 资源我们仍需在 Nginx 层面开启CORS。Nginx 开启 CORS 标准模版location/api/{add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods GET,POST,OPTIONS,PUT,DELETE;add_header Access-Control-Allow-Headers Content-Type,Authorization;# 处理预检请求(OPTIONS)if($request_methodOPTIONS){return204;}proxy_pass http://localhost:8081/admin/;} 面试加分项底层逻辑分析QNginx 是如何实现高并发反向代理的面试加分回答Nginx 采用了Epoll 模型和非阻塞 IO。它并不为每个请求创建一个线程而是通过一个Worker 进程循环处理数千个并发连接。这使得它在处理反向代理请求时资源消耗极低。Q如果不使用 NginxSpring Boot 怎么解决跨域底层分析可以在 Controller 上加CrossOrigin 注解或者配置 WebMvcConfigurer 的 addCorsMappings。但生产环境首选Nginx因为它可以统一管理且性能远高于应用层处理。 方案对比为什么选 Nginx 总结与互动掌握了 Nginx 的配置你就掌握了前后端协作的“密钥”。在《苍穹外卖》中Nginx 不仅解决了接口转发还承担了负载均衡的重要角色。‍ 每日一思如果在生产环境下前端和后端部署在不同的服务器 IP上你的 Nginx 配置需要做哪些修改最后如果你觉得这篇文章帮你解决了困扰已久的 404/跨域问题别忘了✅点赞你的鼓励是我持续输出的动力⭐收藏防走丢下次配置 Nginx 必看关注带你深度拆解《苍穹外卖》所有硬核技术评论区互动你曾被 Nginx 的哪个配置坑到深夜