API 浏览器
Quasar CLI with Webpack - @quasar/app-webpack
面向开发者的 API 代理

将项目文件夹(由 Quasar CLI 创建)与现有后端集成时,一个常见的需求是使用开发服务器访问后端 API。为了实现这一点,我们可以并行(或远程)运行开发服务器和 API 后端,并让开发服务器将所有 API 请求代理到实际的后端。

¥When integrating a project folder (created by Quasar CLI) with an existing backend, a common need is to access the backend API when using the dev server. To achieve this, we can run the dev server and the API backend side-by-side (or remotely), and let the dev server proxy all API requests to the actual backend.

如果你在 API 请求中访问相对路径,这将非常有用。显然,这些相对路径在你开发过程中可能无法使用。为了创建类似于你已部署的网站/应用所使用的环境,你可以代理 API 请求。

¥This is useful if you access relative paths in your API requests. Obviously, these relative paths will probably not work while you are developing. In order to create an environment similar to the one used by your deployed website/app, you can proxy your API requests.

要配置代理规则,请在 devServer.proxy 中编辑 /quasar.config 文件。你应该参考 Webpack 开发服务器代理 文档了解详细用法。这里有一个简单的例子:

¥To configure the proxy rules, edit the /quasar.config file in devServer.proxy. You should refer to Webpack Dev Server Proxy docs for detailed usage. But here’s a simple example:

/quasar.config file

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

¥The above example will proxy the request /api/posts/1 to http://some.api.target.com:7070/posts/1.