為什麼用vue的反向代理

在vue中，因為反向代理可以隱藏真實的服務端，繞過直接請求真正的url而導致的跨域，所以需要使用反向代理來避免出現跨域問題；反向代理常用在前後端分離開發的場景中，前端需要連接後端的接口，將同源的請求傳送到反向代理伺服器。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

為什麼用vue的反向代理

反向代理使用場景

       在前後端分離開發的場景，前端有個伺服器（提供靜態頁面），後端有伺服器（提供介面）

此時，前端需要連接後端的接口，就會出現跨域問題

       在發佈環境中，如果存在跨域問題，使用nginx

       如果前後端程式碼在一個伺服器，不存在跨域問題

跨域的解決方案

#jsonp（前端解決方案）

CORS（後端解決方案）：cross origin resource sharing

#反向代理（前端解決方案）

什麼是反向代理 

        反向代理隱藏真實的服務端，讓瀏覽器仍然是同源

反向代理原則

##        透過偽造請求使得http請求為同源的，然後將同源的請求發送到反向代理伺服器上，由反向代理伺服器去請求真正的url，這樣就繞過直接請求真正的url導致的跨域問題

反向代理程式的設定

vue-cli3的反向代理程式

        在專案根目錄下新建vue.config.js檔案

配置代碼：

module.exports = {undefined
  lintOnSave:false,
  devServer:{undefined
    proxy: { 
      '/api': { 
             target: 'http://localhost:80',
             changeOrigin: true, 
             pathRewrite: {undefined
                '^/api': ""   
              }，
        '/apidouban': {undefined
             target: 'http://localhost:3001',
             changeOrigin: true, 
             pathRewrite: {undefined
                '^/apidouban': ""
              }
          }
      }
   }
}

反向代理程式執行程序：

        axios存取位址中的/api 轉換為target /api：

               

               

#           /goods 轉換為http://localhost:80/api/goods）

##        建立虛擬伺服器

        移除/api：

## 80/goods）

【相關推薦：《

vue.js教學》】

以上是為什麼用vue的反向代理的詳細內容。更多資訊請關注PHP中文網其他相關文章！