快捷導(dǎo)航

angular6+springboot實(shí)現(xiàn)前后分離nginx配置

更新時間：2023年06月02日 10:06:21 作者：Mzoro

這篇文章主要介紹了angular6+springboot實(shí)現(xiàn)前后分離nginx配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

工作場景

苦逼碼農(nóng)一個，公司技術(shù)上希望跟上潮流，但人員不希望跟上，所以前后一起開發(fā)，對于只開發(fā)前端代碼的人來說可以 mock 數(shù)據(jù)，但是本人既然連后臺代碼一起開發(fā)，希望通過 nginx 代理直接訪問接口返回數(shù)據(jù)，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 代理的是前端開發(fā)服務(wù)，服務(wù)啟動在 4200 端口；這個 location 的后 3 行配置是為了讓 nginx 可以代理 websocket , 生產(chǎn)中如果工程中沒有 websocket 可以不用；開發(fā)中 websocket 主要是為了方便快速的在代碼重新發(fā)布之后可以自動刷新頁面
第二個 location 代理的是后臺服務(wù)器，~ /server/.+ 代表這個 location 會處理所有符合這個正則的請求，不會與第一個 location 的 / 沖突，因為～比默認(rèn)的匹配模式高
第二個 location 中第一行 rewrite 是重寫請求 url，比如請求的是 /server/service-name/user/currentUser，實(shí)際想要請求的是 /service-name/user/currentUser, 所以需要 nginx 重寫這個請求的地址
proxy_cookie_path 針對的是服務(wù)器響應(yīng)頭中的 Set-cookie 的 Path 屬性，因為后臺服務(wù)器返回給前臺的 cookie 是帶有自身的 contextpath 的，比如：springboot 中配置了 server.servlet.content-path=mall 或者 tomcat 中的工程名字是 mall ，那么響應(yīng)給前臺的 Set-cookie 的 path 就是 /mall，但是瀏覽器在登陸以后的請求時帶的 cookies 就沒有 path 屬性，這會導(dǎo)致登陸狀態(tài)失效；所以 proxy_cookie_path 是將服務(wù)器返回的 cookies 的 path 進(jìn)行轉(zhuǎn)換的，上面的配置是將服務(wù)器返回的 cookies 路徑的前綴去掉第一段

以上就是angular6+springboot實(shí)現(xiàn)前后分離nginx配置的詳細(xì)內(nèi)容，更多關(guān)于前后分離nginx配置的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: