vue-cli 代理請求原理

Vue 是一個流行的 JavaScript 框架，它可以用來建立互動式的 Web 應用程式。在開發過程中，我們通常會用到 vue-cli 來初始化一個基本的 Vue 專案。 vue-cli 是 Vue 官方提供的鷹架工具，它提供了許多方便的功能，例如專案初始化、打包、發布等。

但是，在開發過程中我們可能會遇到一個問題：跨域請求。由於瀏覽器的同源策略，當我們在前端 Ajax 發送請求時，只能請求同一網域下的伺服器資源，而不能請求其他網域的伺服器資源。這個時候，我們可以透過 vue-cli 中的代理請求來解決這個問題。

那麼，vue-cli 中的代理請求是如何實現的呢？

直接請求和代理請求的區別

在了解代理請求的原理之前，我們需要了解直接請求和代理請求之間的差異。當我們在開發過程中直接透過Ajax 請求存取後台服務時，請求會直接從前端發送到後端，如下圖所示：

##這種方式會涉及到跨域問題。如果後端介面沒有設定跨網域回應頭，那麼瀏覽器就會禁止前端發起 AJAX 請求，導致請求失敗。

而在 vue-cli 中，我們會透過代理請求來解決這個問題。代理請求的基本想法是，將請求傳送到本機伺服器，然後由本機伺服器將請求轉送至後端伺服器。

vue.config.js 中的代理程式設定

#在vue-cli 專案中，我們可以透過設定vue.config.js 檔案來設定代理請求。在該檔案中，我們可以設定

devServer 選項，透過設定 proxy 物件進行代理配置。以下是一個簡單的範例：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

在上述代理程式設定中，我們將

/api 路徑下的請求都會轉送至本機的http://localhost:8080 地址。

其中，

changeOrigin 選項用於控制是否需要更改請求頭中原始主機名稱。

proxy 物件中，我們可以設定多個代理位址，例如：

module.exports = {
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:8081',
        changeOrigin: true
      },
      '/api2': {
        target: 'http://localhost:8082',
        changeOrigin: true
      }
    }
  }
}

這裡的

/api1 和/api2 分別代表要轉送的請求路徑， target 屬性指定了要轉送到的伺服器位址。

實作原理

在了解了代理請求的配置後，我們來看看代理請求的實作原理。

首先，當我們在前端發起請求時，請求會先被傳送到本機伺服器。本機伺服器接收到請求後，會對請求進行一系列處理，包括修改請求頭、修改請求路徑等。然後，將處理過的請求轉送到後端伺服器上。

流程圖如下：

要注意的是，在本機伺服器中，我們需要設定代理中間件，例如

http-proxy- middleware。代理中間件是一個類似於回應請求的攔截器，用於控制請求過程並修改請求內容。我們可以透過配置代理中間件來實現請求的代理轉發。

總結

透過上述的介紹，我們了解了 vue-cli 中的代理請求原則。代理請求是一種在前端解決跨網域問題的方法，透過將請求轉送至本機伺服器，再由本機伺服器將請求轉送至後端伺服器，達到跨網域請求的效果。在 vue-cli 中，我們可以透過設定 vue.config.js 檔案來設定代理請求，從而實現前端的跨域請求。

以上是vue-cli 代理請求原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！