1. 首頁 > 生活 > >

nginx跨域配置詳解 nginx解決前端跨域問題

小知識



文章插圖
nginx跨域配置詳解 nginx解決前端跨域問題

文章插圖

說明
現在的Java Web項目好多都使用前后端分離的開發部署方式，這樣的好處有很多，比如：可以實現真正的前后端解耦，可以減少后端服務器的并發/負載壓力，方便實現多端應用（網頁端、移動端共用一個后臺服務）、增加代碼的維護性&易讀性 。一般我們會采用Nginx來部署前端代碼，使用Tomcat來部署后臺服務 。最近在Windows系統中使用Nginx部署前端代碼時調用后臺服務時出現了跨域的報錯，通過對Nginx的一些代理配置可以解決這個問題，下面給大家分享一下在Nginx中部署前端代碼并解決跨域問題的方法步驟 。
解決跨域問題的思路：出現跨域問題的原因在于靜態資源的訪問地址是Nginx服務器的地址，比如http://ip1:port1，然后我們在靜態頁面中通過ajax請求后臺服務獲取數據，后臺服務的地址是http://ip2:port2，這兩個地址的ip端口不同，就導致了跨域問題的出現，那我們就需要訪問一個和前端頁面具有相同地址的后臺服務才會避免跨越問題，可以設置一個代理，比如我們把后臺服務訪問地址換成http://ip1:port1/api/，然后通過一定的配置將http://ip1:port1/api/地址收到的請求轉發到真正的后臺服務地址http://ip2:port2，這樣就可以避免跨域問題的出現 。
在html目錄下面放靜態資源
把我們要部署的靜態資源文件夾放到Nginx的html目錄下面，例如testpage文件夾下面有一個index.html頁面，直接把testpage文件夾放到Nginx的目錄下面 。
配置反向代理
打開Nginx conf目錄下面的nginx.conf文件，在第一個server里面添加一個location對前端發送的服務調用請求地址進行過濾，配置如下：
location /api/ {rewrite ^/api/(.*)$ /$1 break;#所有對后端的請求加一個api前綴方便區分，真正訪問的時候移除這個前綴# API Serverproxy_pass http://127.0.0.1:8092;#將真正的請求代理到真實的服務器地址，ajax的url為/api/user/1的請求將會訪問http://127.0.0.1:8092/user/1}經過上面的配置以后，我們的前端資源訪問地址和ajax請求的后臺服務地址就可以保持一致，從而避免了跨域問題的出現 。
啟動Nginx
首先在cmd命令窗口中切換到nginx所在的目錄，然后輸入命令：
start nginx.exe
停止Nginx
在cmd命令窗口中輸入：
nginx.exe -s stop【nginx跨域配置詳解 nginx解決前端跨域問題】注意事項
1、有時候使用命令nginx.exe -s stop停不掉Nginx，可以使用命令taskkill /f /t /im nginx.exe強制關閉Nginx進程 。