Flutter开发代理插件jaguar_dev_proxy的使用

jaguar_dev_proxy

提供了PrefixedProxyServer来反向代理某些选定的请求到另一个服务器。

这类似于Nginx的反向代理。

使用

需要创建一个PrefixedProxyServer实例并添加到Jaguar服务器。PrefixedProxyServer构造函数接受所有必要的参数来配置反向代理。

反向代理的工作是：

1. 匹配某些路径
2. 将其转换为目标路径
3. 将接收到的请求转发到目标路径
4. 将从服务器获得的响应转发给客户端

步骤1和2需要配置。

匹配的路径

构造函数的第一个参数（path）用于匹配传入的URL/路由。匹配基于前缀。例如：

当path为/html时，它将匹配：

• /html
• /html/
• /html/index.html
• /html/static/index.html

目标路径

构造函数的第二个参数（proxyBaseUrl）用于将传入的请求URL转换为反向代理的目标URL。proxyBaseUrl只是在匹配path之后剩余部分之前添加的。例如：

对于new PrefixedProxyServer('/html', 'http://localhost:8000/client')，

• /html 映射到 http://localhost:8000/client/
• /html/ 映射到 http://localhost:8000/client/
• /html/index.html 映射到 http://localhost:8000/client/index.html
• /html/static/index.html 映射到 http://localhost:8000/client/static/index.html

示例代码

以下是一个简单的使用示例：

import 'package:jaguar/jaguar.dart';
import 'package:jaguar_dev_proxy/jaguar_dev_proxy.dart';

void main() async {
  // 反向代理所有/html/开头的请求到本地8000端口的pub服务器
  // 注意：使用命令 `pub run build_runner serve web:8000` 启动pub服务器
  final proxy = PrefixedProxyServer('/html', 'http://localhost:8000/');

  final server = Jaguar(address: 'localhost', port: 8085);
  server.add(proxy); // 添加代理到Jaguar服务器
  server.getJson('/api/user', (Context ctx) => {'name': 'teja'}); // 定义API路由
  server.log.onRecord.listen(print); // 打印日志
  await server.serve(logRequests: true); // 启动服务器
}

完整示例Demo

假设我们有一个Flutter应用，并且我们希望在开发过程中通过代理服务器来处理一些请求。我们可以使用jaguar_dev_proxy来实现这一功能。

步骤1: 设置代理服务器

首先，我们需要设置一个代理服务器来处理请求。根据上面的示例，我们可以创建一个代理服务器，该服务器会将所有以/html开头的请求转发到本地的8000端口。

步骤2: 启动代理服务器

启动代理服务器并监听指定的端口。

import 'package:jaguar/jaguar.dart';
import 'package:jaguar_dev_proxy/jaguar_dev_proxy.dart';

void main() async {
  // 创建代理服务器
  final proxy = PrefixedProxyServer('/html', 'http://localhost:8000/');

  // 创建Jaguar服务器
  final server = Jaguar(address: 'localhost', port: 8085);

  // 添加代理服务器
  server.add(proxy);

  // 定义API路由
  server.getJson('/api/user', (Context ctx) => {'name': 'teja'});

  // 打印日志
  server.log.onRecord.listen(print);

  // 启动服务器
  await server.serve(logRequests: true);
}

步骤3: 在Flutter应用中使用代理

在Flutter应用中，我们可以使用HTTP客户端库（如http包）来发送请求。假设我们的应用需要访问/html路径下的资源，我们将这些请求发送到代理服务器。

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('代理插件示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 发送请求到代理服务器
              final response = await http.get(Uri.parse('http://localhost:8085/html/index.html'));
              print(response.body);
            },
            child: Text('发送请求'),
          ),
        ),
      ),
    );
  }
}