Apache設置反向代理解決js跨域問題

這是一個很簡單的方案，通過啟用Apache反向代理解決js跨域問題

為什么要這么做？

在現在的開發過程中大家會遇到這樣一個問題：后端代碼寫好之后，前端的小伙伴需要將后端代碼部署到本地才能正常使用api。若直接使用遠程服務器上的api（例如測試服務器上的api）就會出現js跨域問題，導致無法使用遠程服務器上的api。將后端代碼部署到前端小伙伴的本地會出現以下幾個問題

• 下載并調試后端代碼到前端小伙伴本地， 花時間 ！

• 后端代碼有更新之后，前端小伙伴也需要更新本機上的后端代碼， 花時間 ！

• 前端小伙伴本地安裝的服務器環境可能略有差異，從而導致后端代碼在本機上不能正常運行，需要后端小伙伴協助調試， 花時間 ！

為了簡單高效的開發，建議前端的小伙伴啟用Apache反向代理解決js跨域問題。在解決js跨域問題之后，前端小伙伴可直接使用測試服務器上的api接口，不需要再在本地部署后端代碼，而后端小伙伴只需要維護測試服務器即可。

什么是反向代理？

這里簡單介紹一下反向代理：如下圖所示，用戶A一直使用原始服務器B的資源，但是用戶A始終認為它訪問的是原始服務器B而不是代理服務器Z，但實用際上反向代理服務器接受用戶A的應答，從原始資源服務器B中取得用戶A的需求資源，然后發送給用戶A。由于防火墻的作用，只允許代理服務器Z訪問原始資源服務器B。盡管在這個虛擬的環境下，防火墻和反向代理的共同作用保護了原始資源服務器B，但用戶A并不知情。

準備

請確保本地已經正確安裝了xampp或者wamp

怎么做？

1. 在xampp或者wamp安裝目錄下，修改httpd.conf配置文件，去掉以下兩行前面 # 號，從而啟用Apache proxy module。

   LoadModule proxy_module modules/mod_proxy.so
   LoadModule proxy_http_module modules/mod_proxy_http.so

2. 找到httpd-vhosts.conf配置文件，在virtualHost里面配置反向代理，完成之后的配置代碼如下：

   <VirtualHost *:80>
       ProxyRequests Off
   
       <Proxy *>
         Order deny,allow
         Allow from all
       </Proxy>
   
       ProxyPass /project http://ip_address/project
   </VirtualHost>

   • ProxyRequests Off 指令是指采用反向(reverse)代理

   • ProxyPass 指令允許將一個遠端服務器映射到本地服務器的 URL 空間中。

   • 配置完成之后，訪問 http://localhost/project 實際就是訪問 http://ip_address/project 上的資源。簡單的說，我們通過這個配置欺騙了js，讓js以為我們一直在相同域名下訪問資源。

3. 重啟Apache，重命名之前本地的后端代碼文件夾（反正讓本地后端代碼不能夠正常運行即可），然后測試一下看api數據讀取是否正常。若api數據讀取正常，那么Apache反向代理設置成功并且正常工作。

來自：https://segmentfault.com/a/1190000007352990