1. 程式人生 > >解決前端跨域問題方法之一配置Apache反向代理拿介面資料

解決前端跨域問題方法之一配置Apache反向代理拿介面資料

反向代理的原理圖解

  1. 由於跨域阻止了我們資料請求,所以轉變思路,我們不傳送跨域請求了,直接請求當前域名中的內容
  2. 伺服器在接收到資料請求之後將資料請求轉發給介面伺服器
  3. 介面伺服器先將資料返回給web伺服器
  4. web伺服器再將介面伺服器返回的資料轉發給瀏覽器
  5. 從studyit.com傳送請求到api.botue.com瀏覽器產生了跨域,被瀏覽器截止了!
    注意:使用反向代理會增加伺服器負擔,訪問量大的話,伺服器就容易崩。

原理:
請求資料,不再直接請求介面伺服器,而是請求自己的網頁伺服器,就不會再有跨域問題的產生。
自己的網頁伺服器上,需要做些許的配置,幫我們轉發資料請求到介面伺服器!

配置步驟如下:

  1. 開啟httpd.conf,搜尋proxy,將下面兩行程式碼註釋去掉
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule proxy_module modules/mod_proxy.so
  1. 開啟httpd-vhosts.conf檔案(C:\wamp\bin\apache\Apache2.2.21\conf\extra\httpd-vhosts.conf),在需要跨域的頁面域名節點下加入下面兩個配置項
<VirtualHost *:80>
ProxyRequests off    #代理伺服器正向代理關閉了
ProxyPass /api http://api.botue.com/v3    #代理轉發路徑;/api是隨意寫的,只是指定一個名字,讓這個名字幫忙拿資料。
#例如:
#http://studyit.com/api/teacher
#http://api.botue.com/v3/teacher
#是完全等價的
</VirtualHost>

3. 重啟wamp

作者:pingping_log
連結:https://www.jianshu.com/p/753b914f1d22
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯絡作者獲得授權並註明出處。