Nginx反向代理后前端仍跨域，問題出在哪兒？

nginx反向代理下的前端跨域問題排查及解決

在使用docker部署前端項目并通過Nginx進(jìn)行反向代理時，開發(fā)者經(jīng)常會遇到跨域問題。本文分析一個典型案例，解釋為何即使Nginx配置看似正確，前端請求仍然出現(xiàn)跨域錯誤。

問題現(xiàn)象： 用戶使用Nginx反向代理，其default.config文件已配置反向代理規(guī)則（此處假設(shè)配置正確，指向后端服務(wù)，例如端口3344）。但前端項目請求時，依然報錯跨域。

問題根源： 關(guān)鍵在于前端請求的URL。盡管Nginx正確代理了指向3344端口的服務(wù)，前端代碼可能直接在請求URL中硬編碼了3344端口。這意味著瀏覽器請求直接指向3344端口，繞過了Nginx的反向代理。Nginx只能代理外部請求，前端直接訪問后端，則Nginx的代理功能失效，跨域問題無法解決。

立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；

解決方案： 問題不在Nginx配置，而在前端URL構(gòu)建方式。解決方法是修改前端代碼，移除URL中的3344端口號。前端請求應(yīng)直接指向Nginx監(jiān)聽端口（例如80或443），由Nginx轉(zhuǎn)發(fā)請求到后端。這樣，請求先到達(dá)Nginx，再由Nginx轉(zhuǎn)發(fā)，從而解決跨域問題。 簡而言之，修正前端代碼，去除URL中多余的端口號即可。