[已解决] 苍穹外卖 Nginx 避坑指南：反向代理与跨域问题一网打尽，联调再也不报错！

😩 深夜痛点：浏览器里那一抹“惊艳”的红

凌晨三点，你眼圈发黑。后端接口在 Postman 里测得好好的，返回 200 OK，可一到前端页面就卡住。
打开浏览器控制台，映入眼帘的是一行无情的红色大字：

Access to XMLHttpRequest at ‘…’ from origin ‘…’ has been blocked by CORS policy…

“反向代理配置了啊？路径也对了啊？为什么还是报 404 或者跨域？”张工猛揪了一下头发。

在《苍穹外卖》这种前后端分离的项目中，Nginx 不仅仅是一个静态服务器，更是连接前后的“桥梁”。如果这座桥搭歪了，数据永远传不过去。今天，我们就来彻底拆解 Nginx 的核心配置。

🛠️ 核心概念：为什么要用反向代理？

在开发环境下，前端运行在8080 端口，后端运行在8081 端口。浏览器出于安全考虑，禁止跨域请求。

正向代理：隐藏客户端（如 VPN）。

反向代理：隐藏服务端。前端统一请求 Nginx（80端口），由 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_headerConnection"Upgrade";}}

💡 避坑小贴士：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_method='OPTIONS'){return204;}proxy_pass http://localhost:8081/admin/;}

💡 面试加分项：底层逻辑分析

Q：Nginx 是如何实现高并发反向代理的？

面试加分回答：Nginx 采用了Epoll 模型和非阻塞 IO。它并不为每个请求创建一个线程，而是通过一个Worker 进程循环处理数千个并发连接。这使得它在处理反向代理请求时，资源消耗极低。

Q：如果不使用 Nginx，Spring Boot 怎么解决跨域？

底层分析：可以在 Controller 上加@CrossOrigin 注解，或者配置 WebMvcConfigurer 的 addCorsMappings。但生产环境首选Nginx，因为它可以统一管理，且性能远高于应用层处理。

📈 方案对比：为什么选 Nginx？

🔚 总结与互动

掌握了 Nginx 的配置，你就掌握了前后端协作的“密钥”。在《苍穹外卖》中，Nginx 不仅解决了接口转发，还承担了负载均衡的重要角色。

👨‍💻 每日一思：

如果在生产环境下，前端和后端部署在不同的服务器 IP上，你的 Nginx 配置需要做哪些修改？

最后，如果你觉得这篇文章帮你解决了困扰已久的 404/跨域问题，别忘了：
✅点赞（你的鼓励是我持续输出的动力）
⭐收藏（防走丢，下次配置 Nginx 必看）
👤关注（带你深度拆解《苍穹外卖》所有硬核技术）

评论区互动：你曾被 Nginx 的哪个配置坑到深夜？👇