flutter中的WebviewScaffold(类似安卓中的webView)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flutter中的WebviewScaffold(类似安卓中的webView)相关的知识,希望对你有一定的参考价值。

参考技术A 安装插件 flutter_webview_plugin: ^0.2.1
从listview点击item跳转页面加载详情页案例

在跳转的地方调用

如何去除 Flutter 中的“XMLHttpRequest 错误”? (Django 后端,Flutter 前端)

【中文标题】如何去除 Flutter 中的“XMLHttpRequest 错误”? (Django 后端,Flutter 前端)【英文标题】:How do you remove the "XMLHttpRequest error" in Flutter? (Django backend, Flutter frontend) 【发布时间】:2021-10-07 01:07:09 【问题描述】:

我在将 Django 后端连接到 web 上的 Flutter 前端时遇到问题。我尚未在 Android 或 iOS 上进行测试。

我希望能够进行 API 调用并让它返回一个我可以转换为 json 的响应。但是,无论我尝试了什么,它都会引发错误。我尝试将其转换为 https 请求,但无济于事。

如果有人在 Django 方面需要任何东西,请告诉我

这是错误的样子:

Error: XMLHttpRequest error.
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 909:28                get current

packages/http/src/browser_client.dart 71:22                                       <fn>

dart-sdk/lib/async/zone.dart 1613:54 runUnary dart-sdk/lib/async/future_impl.dart 155:18 handleValue dart-sdk/lib/async/future_impl.dart 707:44 handleValueCallback dart-sdk/lib/async/future_impl.dart 736:13 _propagateToListeners dart-sdk/lib/async/future_impl.dart 533:7 [_complete] dart-sdk/lib/async/stream_pipe.dart 61:11 _cancelAndValue dart-sdk/lib/async/stream.dart 1219:7 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 324:14 _checkAndCall dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 329:39 dcall dart-sdk/lib/html/dart2js/html_dart2js.dart 37307:58

at Object.createErrorWithStack (http://localhost:63593/dart_sdk.js:5362:12)
at Object._rethrow (http://localhost:63593/dart_sdk.js:39509:16)
at async._AsyncCallbackEntry.new.callback (http://localhost:63593/dart_sdk.js:39503:13)
at Object._microtaskLoop (http://localhost:63593/dart_sdk.js:39335:13)
at _startMicrotaskLoop (http://localhost:63593/dart_sdk.js:39341:13)
at http://localhost:63593/dart_sdk.js:34848:9

这是一个代码sn-p

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

var url2 = 'https://0.0.0.0:8809/test/';
              try
                response = await http.get(Uri.parse(url2));
                print(response.body);
              
              catch(exception)
                print('could not access');
                    response = await http.get(Uri.parse(url2));
              

            ,

我让它打印出错误。

【问题讨论】:

您在 django 服务器上启用了 CORS。在 Flutter 方面未解决。阅读 CORS 相关问题,它不特定于编程语言,它与浏览器相关和服务器请求标头。 【参考方案1】:

这可能是因为您的后端未启用 CORS。这是因为您的服务器和前端位于不同的 IP 上(即使您在 localhost 上工作,端口仍然不同)。

要解决此问题,您只需添加参数以在响应标头中启用 CORS。有一些包可用作中间件,因此您不必在每个响应中添加它。请参考以下问题:

How can I enable CORS on Django REST Framework

【讨论】:

是的,非常感谢!我对 Django 不是很熟悉,这个问题困扰了我至少一个小时。 很高兴听到这个消息。如果它解决了您的问题,请接受答案,以便帮助遇到相同问题的其他人

以上是关于flutter中的WebviewScaffold(类似安卓中的webView)的主要内容,如果未能解决你的问题,请参考以下文章

关闭 WebviewScaffold 或调整 flutterWebviewPlugin 的大小以适合父小部件

flutter特别篇:flutter嵌入h5页面

如何在flutter中通过webview下载/创建pdf

Flutter 和 Openlayers - 包括 Flutter 中的 js 库

为啥 Flutter 中的 Form 需要 GlobalKey?

如何去除 Flutter 中的“XMLHttpRequest 错误”? (Django 后端,Flutter 前端)