1 說明
現(xiàn)在的Java Web項目好多都使用前后端分離的開發(fā)部署方式,這樣的好處有很多膀跌,比如:可以實現(xiàn)真正的前后端解耦,可以減少后端服務(wù)器的并發(fā)/負(fù)載壓力劫流,方便實現(xiàn)多端應(yīng)用(網(wǎng)頁端、移動端共用一個后臺服務(wù))仍秤、增加代碼的維護性&易讀性可很。一般我們會采用Nginx來部署前端代碼,使用Tomcat來部署后臺服務(wù)我抠。最近在Windows系統(tǒng)中使用Nginx部署前端代碼時調(diào)用后臺服務(wù)時出現(xiàn)了跨域的報錯,通過對Nginx的一些代理配置可以解決這個問題瓣窄,下面給大家分享一下在Nginx中部署前端代碼并解決跨域問題的方法步驟尘惧。
解決跨域問題的思路:出現(xiàn)跨域問題的原因在于靜態(tài)資源的訪問地址是Nginx服務(wù)器的地址,比如http://ip1:port1啥么,然后我們在靜態(tài)頁面中通過ajax請求后臺服務(wù)獲取數(shù)據(jù)贰逾,后臺服務(wù)的地址是http://ip2:port2,這兩個地址的ip端口不同氯迂,就導(dǎo)致了跨域問題的出現(xiàn)言缤,那我們就需要訪問一個和前端頁面具有相同地址的后臺服務(wù)才會避免跨越問題,可以設(shè)置一個代理管挟,比如我們把后臺服務(wù)訪問地址換成http://ip1:port1/api/僻孝,然后通過一定的配置將http://ip1:port1/api/地址收到的請求轉(zhuǎn)發(fā)到真正的后臺服務(wù)地址http://ip2:port2,這樣就可以避免跨域問題的出現(xiàn)穿铆。
2 步驟
2.1 在html目錄下面放靜態(tài)資源
把我們要部署的靜態(tài)資源文件夾放到Nginx的html目錄下面荞雏,例如testpage文件夾下面有一個index.html頁面平酿,直接把testpage文件夾放到Nginx的目錄下面悦陋。
2.2 配置反向代理
打開Nginx conf目錄下面的nginx.conf文件,在第一個server里面添加一個location對前端發(fā)送的服務(wù)調(diào)用請求地址進行過濾,配置如下:
location /api/ {
rewrite ^/api/(.*)$ /$1 break; #所有對后端的請求加一個api前綴方便區(qū)分痒钝,真正訪問的時候移除這個前綴
# API Server
proxy_pass http://127.0.0.1:8092; #將真正的請求代理到真實的服務(wù)器地址痢毒,ajax的url為/api/user/1的請求將會訪問http://127.0.0.1:8092/user/1
}
經(jīng)過上面的配置以后,我們的前端資源訪問地址和ajax請求的后臺服務(wù)地址就可以保持一致栋荸,從而避免了跨域問題的出現(xiàn)凭舶。
2.3 啟動Nginx
首先在cmd命令窗口中切換到nginx所在的目錄:
然后輸入命令:start nginx.exe就可以啟動Nginx了。
2.4 停止Nginx
在cmd命令窗口中輸入:nginx.exe -s stop
3 注意事項
1匆背、有時候使用命令nginx.exe -s stop停不掉Nginx身冀,可以使用命令taskkill /f /t /im nginx.exe強制關(guān)閉Nginx進程搂根。