工作场景

苦逼码农一个，公司技术上希望跟上潮流，但人员不希望跟上，所以前后一起开发，对于只开发前端代码的人来说可以 mock 数据，但是本人既然连后台代码一起开发，希望通过 nginx 代理直接访问接口返回数据，so…

nginx 配置

server {
         listen 8085;
         server_name localhost;
         location / {
             proxy_pass http://localhost:4200;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "upgrade";
         }
         location ~ /server/.+ {
             rewrite /server/(.+) /$1 break;
             proxy_pass http://localhost:8082;
             proxy_cookie_path ~*^/.+/([^/]*) /$1;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Real-IP $remote_addr;
         }
    }

解析

自动略过 server 的前两行

• 第一个 location 代理的是前端开发服务，服务启动在 4200 端口； 这个 location 的后 3 行配置是为了让 nginx 可以代理 websocket , 生产中如果工程中没有 websocket 可以不用； 开发中 websocket 主要是为了方便快速的在代码重新发布之后可以自动刷新页面
• 第二个 location 代理的是后台服务器，~ /server/.+ 代表这个 location 会处理所有符合这个正则的请求，不会与 第一个 location 的 / 冲突，因为 ～ 比 默认的匹配模式高
• 第二个 location 中第一行 rewrite 是重写请求 url，比如 请求的是 /server/service-name/user/currentUser，实际想要请求的是 /service-name/user/currentUser, 所以需要 nginx 重写这个请求的地址
• proxy_cookie_path 针对的是 服务器响应头中的 Set-cookie 的 Path 属性，因为后台服务器返回给前台的 cookie 是带有自身的 contextpath 的，比如：springboot 中配置了 server.servlet.content-path=mall 或者 tomcat 中的工程名字是 mall ，那么响应给前台的 Set-cookie 的 path 就是 /mall，但是浏览器在登陆以后的请求时带的 cookies 就没有 path 属性，这会导致登陆状态失效；所以 proxy_cookie_path 是将 服务器返回 的 cookies 的 path 进行转换的，上面的配置是将服务器返回的 cookies 路径的前缀去掉第一段

以上就是angular6+springboot实现前后分离nginx配置的详细内容，更多关于前后分离nginx配置的资料请关注IT俱乐部其它相关文章！