为什么捐赠
API 浏览器
升级指南
NEW!
quasar.config 配置文件
迁移到 Webpack 版 CLI
浏览器兼容性
TypeScript 支持
目录结构
命令列表
CSS 预处理器
使用 Vue Router 进行页面路由
懒加载 - 代码分割
资源处理
Boot 文件
预取特性
API 代理
配置 Webpack
处理 process.env
使用 Pinia 管理状态
代码检查与格式化
测试与审计
开发移动应用
Ajax 请求
开放开发服务器到公网
联系站长
Quasar CLI with Webpack - @quasar/app-webpack
开发时进行 API 代理

当开发时,我们常常需要访问后端提供的接口 API,我们可以让开发服务器将所有 API 请求代理到实际的后端。

例如,当您的 API 请求路径都是相对路径时,这就非常有用了,显然,这些相对路径的接口在开发环境下可能不存在。也就是说您可以使用代理 API 的方式创建与网站/应用部署时类似的环境。

为了配置代理规则,需要编辑 /quasar.config.js 文件中的 devServer.proxy 对象。您应该参考 Webpack Dev Server Proxy 页面参考详细的用法,但是这里有一个简单的示例:

// quasar.config.js

devServer: {
  proxy: {
    // 代理所有以 /api 开头的请求
    '/api': {
      target: 'http://some.api.target.com:7070',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

上面的示例会将 /api/posts/1 请求代理到 http://some.api.target.com:7070/posts/1