為何捐款
API 瀏覽器
升級指南
NEW!
quasar.config 檔案
轉換為搭配 Webpack 的 CLI
瀏覽器相容性
支援 TypeScript
目錄結構
命令列表
CSS 預處理器
路由
延遲載入 - 程式碼分割
處理資源
啟動檔案
預取功能
API 代理
處理 Webpack
處理 process.env
使用 Pinia 的狀態管理
使用 Vuex 的狀態管理
Linter
測試與稽核
開發手機應用程式
Ajax 請求
公開 Dev Server
Quasar CLI with Webpack - @quasar/app-webpack
開發環境 API 代理

將 Quasar CLI 建立的專案資料夾與現有後端整合時,常見的需求是在使用開發伺服器時存取後端 API。為了實現這一點,我們可以並排(或遠端)執行開發伺服器和 API 後端,並讓開發伺服器將所有 API 請求代理到實際的後端。

如果您在 API 請求中存取相對路徑,這會很有用。顯然,這些相對路徑在您開發時可能無法運作。為了建立一個類似於您部署的網站/應用程式所使用的環境,您可以代理您的 API 請求。

若要配置代理規則,請編輯 /quasar.config 檔案中的 devServer.proxy。您應該參考 Webpack Dev Server Proxy 文件以取得詳細用法。但這是一個簡單的範例

/quasar.config 檔案

devServer: {
  proxy: {
    // proxy all requests starting with /api to jsonplaceholder
    '/api': {
      target: 'http://some.api.target.com:7070',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

上述範例會將 /api/posts/1 請求代理到 http://some.api.target.com:7070/posts/1