使用Nginx解決前后端分離部署中的跨域問題

原文地址

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進程搂根。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市猪叙,隨后出現(xiàn)的幾起案子隙咸,更是在濱河造成了極大的恐慌,老刑警劉巖五督,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件充包,死亡現(xiàn)場離奇詭異遥椿,居然都是意外死亡淆储,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門碴裙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來舔株,“玉大人还棱,你說我怎么就攤上這事“煺。” “怎么了琳要?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵稚补,是天一觀的道長。 經(jīng)常有香客問我拯钻,道長撰豺,這世上最難降的妖魔是什么污桦? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮小作,結(jié)果婚禮上稼钩,老公的妹妹穿的比我還像新娘。我一直安慰自己坝撑,他們只是感情好粮揉,可當(dāng)我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布扶认。 她就那樣靜靜地躺著殊橙,像睡著了一般。 火紅的嫁衣襯著肌膚如雪螃概。 梳的紋絲不亂的頭發(fā)上鸽疾,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天训貌,我揣著相機與錄音,去河邊找鬼豺鼻。 笑死款慨,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的檩奠。 我是一名探鬼主播埠戳,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼颗圣!你這毒婦竟也來了屁使?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤蔽午,失蹤者是張志新(化名)和其女友劉穎酬蹋,沒想到半個月后疾呻,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體写半,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了悔捶。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡犁柜,死狀恐怖堂淡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情萤悴,我是刑警寧澤皆的,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站费薄,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏柳沙。R本人自食惡果不足惜拌倍,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望数初。 院中可真熱鬧梗顺,春花似錦、人聲如沸寺谤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至环戈,卻和暖如春澎灸,著一層夾襖步出監(jiān)牢的瞬間院塞,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工性昭, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留拦止,地道東北人。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓糜颠,卻偏偏與公主長得像汹族,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子括蝠,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,922評論 2 361