angular6+springboot實現(xiàn)前后分離nginx配置
更新時間:2023年06月02日 10:06:21 作者:Mzoro
這篇文章主要介紹了angular6+springboot實現(xiàn)前后分離nginx配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
工作場景
苦逼碼農一個,公司技術上希望跟上潮流,但人員不希望跟上,所以前后一起開發(fā),對于只開發(fā)前端代碼的人來說可以 mock 數(shù)據,但是本人既然連后臺代碼一起開發(fā),希望通過 nginx 代理直接訪問接口返回數(shù)據,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ā)服務,服務啟動在 4200 端口; 這個 location 的后 3 行配置是為了讓 nginx 可以代理 websocket , 生產中如果工程中沒有 websocket 可以不用; 開發(fā)中 websocket 主要是為了方便快速的在代碼重新發(fā)布之后可以自動刷新頁面
- 第二個 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 屬性,這會導致登陸狀態(tài)失效;所以proxy_cookie_path
是將 服務器返回 的 cookies 的 path 進行轉換的,上面的配置是將服務器返回的 cookies 路徑的前綴去掉第一段
以上就是angular6+springboot實現(xiàn)前后分離nginx配置的詳細內容,更多關于前后分離nginx配置的資料請關注腳本之家其它相關文章!
相關文章
使用nginx實現(xiàn)一個端口和ip訪問多個vue前端的全過程
為滿足單端口訪問多個前端應用的需求,需要對nginx進行配置,同時修改vue項目的publicPath參數(shù),這篇文章主要介紹了使用nginx實現(xiàn)一個端口和ip訪問多個vue前端的相關資料,需要的朋友可以參考下2024-09-09nginx配置ssl實現(xiàn)https訪問的步驟(適合新手)
這篇文章主要給大家介紹了關于nginx配置ssl實現(xiàn)https訪問的相關資料,這個教程非常適合新手小白,文中通過示例代碼將實現(xiàn)的方法一步步介紹的非常詳細,需要的朋友可以參考借鑒,下面來一起看看吧2018-12-12