Nginx反向代理解決前後端聯調跨域問題

原因分析

同源策略會阻止一個域的javascript腳本和另外一個域的內容進行交互。比如：前端項目在本地運行後的地址爲http://localhost:8080/，此時要訪問後端接口http://192.168.123.43:8000/api/xxx/xxx，就會遇到跨域問題不能訪問。

解決方法

1. 下載

   http://nginx.org/

2. 配置

   進入你的ngnix安裝目錄，打開./conf/nginx.conf文件，修改http中server配置項，比如：

   server {
       # 要監聽的地址
       listen       9000;
       server_name  localhost;
       
       # 前端資源
       location / {
           proxy_pass        http://localhost:8080;
       }
       
       # 後端接口
       location /api/ {
           proxy_pass        http://192.168.123.43:8000;
           proxy_set_header  Host  $host;
       }
   }
   

3. 啓動

   在ngnix安裝目錄下，執行相應命令。下面爲幾個常用的命令，如需瞭解更多可以訪問相關的nginx文檔。

   • 測試配置文件格式是否正確： nginx -t
   • 啓動： nginx
   • 重啓： nginx -s reload
   • 停止： nginx -s stop
   
   就按上文配置的例子來講，啓動nginx後我們可以在http://localhost:9000/地址下訪問前端頁面，同時也可以訪問到接口http://localhost:9000/api/xxx/xxx，這樣前後端聯調跨域問題就解決了。