在 webiew 中加载 url 时出现问题

Question

我正在尝试使用我的应用程序中的 webview 在前端加载从后端返回的自定义 url。问题是 webview 不加载 url，但是当我在网络浏览器中打开 url 时，它会加载

下面是网页视图的代码

class MainPaymentScreen extends StatefulWidget {
  const MainPaymentScreen({super.key});

  @override
  State<MainPaymentScreen> createState() => _MainPaymentScreenState();
}

class _MainPaymentScreenState extends State<MainPaymentScreen> {
  String? _url;
  late WebViewController _webViewController;
  late AuthorizationUrl provider;
  bool _hasError = false;

  @override
  void initState() {
    super.initState();
    _webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onWebResourceError: (error) {
            setState(() {
              _hasError = true;
            });
            Center(child: Text('An error occurred'),);
          },
          onPageFinished: (url) {
            setState(() {
              _hasError = false;
            });
          },
          onNavigationRequest: (request) {
            if (request.url.startsWith('http://www.youtube.com')) {
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      );
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    // Access the provider and update the URL
    provider = Provider.of<AuthorizationUrl>(context);
    final newUrl = provider.authorization_url;

    // Load the URL only if it has changed
    if (_url != newUrl && newUrl.isNotEmpty) {
      _url = newUrl;
      print(newUrl);
      _webViewController.loadRequest(Uri.parse(_url!));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: _url == null
            ? Center(child: CircularProgressIndicator())
            : _hasError
                ? Center(child: Text('An error occurred'))
                : WebViewWidget(controller: _webViewController),
      ),
    );
  }
}

用于从后端检索 url 并存储 url 的代码

class PaymentService {
  static Future<void> sendPayment(
    BuildContext context, {
    required String amount,
    required String email,
    required String currency,
  }) async {
    http.Response? response;
    try {
      final paymentEndpoint = 'http://10.0.2.2:3000/api/v1/receive-payment';
      response = await http.post(Uri.parse(paymentEndpoint),
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ${EnvironConfig.secretKey}',
          },
          body: jsonEncode({
            "amount": amount,
            "email": email,
            "currency": currency,
          }));

      if (response.statusCode == 200) {
        final responseData = jsonDecode(response.body);

        final authUrl = responseData['authorization_url'];
        final reference = responseData['reference'];

        if (authUrl != null && reference != null) {
          Provider.of<AuthorizationUrl>(context, listen: false).authUrl(authUrl);
          // Provider.of<AuthorizationUrl>(context, listen: false).setReference(reference);

          // verifyPayment(reference: reference);

          

          print("Authorization URL: $authUrl");
          print("Reference: $reference");
        } else {
          print("Authorization URL or Reference is null.");
        }
      } else {
        print("Failed to send payment. Status code: ${response.statusCode}");
        print("Response body: ${response.body}");
      }
    } catch (e) {
      print("Exception occurred: $e");
    }
  }
}

我的 androidManifest 文件

<uses-permission android:name="android.permission.INTERNET"/>
   android:usesCleartextTraffic="true"
 

Answer 1

您的后端 URL (http://10.0.2.2:3000/api/v1/receive- payment) 可从模拟器访问。 10.0.2.2 IP 主机映射到设备上的 localhost，但如果您在物理机上执行此操作，则此 URL 将不起作用。在这种情况下，请替换您设备的IP地址或真实域名