我正在尝试开发一个flutter应用程序,它可以向托管在000webHost上的远程php文件发送http请求。
当我为桌面构建Flutter应用程序时,我设法检索信息,一切正常。但是,由于另一个问题(视频播放器不适用于桌面...),我想回到Web构建。
我已经看了几个帖子,但我没有发现一个类似于我的错误。有些人谈到一个错误,由于交叉原点请求(CORS),但在我看来不是这个问题。
当我尝试使用www.example.com检索数据时,出现以下错误:http.post I have the following errors:
browser_client.dart:87 POST https://<myadresse>.000webhostapp.com/<nameFile>.php net::ERR_HTTP2_PROTOCOL_ERROR
Uncaught (in promise) Error: XMLHttpRequest error.
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 906:28 get current packages/http/src/browser_client.dart 84:22 <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1446:54 runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 150:18 handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 703:44 handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 732:32 _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 526:7 [_complete]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream_pipe.dart 61:11 _cancelAndValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream.dart 1302:7 <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 324:14 _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 329:39 dcall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/html/dart2js/html_dart2js.dart 37312:58 <fn>
at Object.createErrorWithStack (errors.dart:249)
at Object._rethrow (async_patch.dart:200)
at async._AsyncCallbackEntry.new.callback (zone.dart:1171)
at Object._microtaskLoop (schedule_microtask.dart:41)
at _startMicrotaskLoop (schedule_microtask.dart:50)
at async_patch.dart:166
我的代码:
void fetchData() async {
/**Map for instructions with php**/
var map = Map<String, dynamic>();
HandlerResponse
handlerResponse2; //Use to manage errors and parsing of received responses
map['action'] = Constants.GET_ALL_OPERATIONS;
try {
//Retrieving the response with the file containing the accesses to the database
http.Response responseCall = await http.post(Constants.ROOT,
body: map, headers: {"Access-Control-Allow-Origin": "*" , "Access-Control-Allow-Credentials": "true"});
//Definition of the behavior to adopt upon receipt of the response
handlerResponse2 = HandlerResponse(parseReponse: parseResponse);
//Recovery of response processing
_operations =
handlerResponse2.response(responseCall); //response(responseCall);
//Notify the change to widgets using the provider to update the interface
notifyListeners();
} on SocketException {
throw FetchDataException('No Internet connection');
}
}
当我使用扑动医生时:
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel dev, 1.25.0-4.0.pre, on Microsoft Windows [version 10.0.18362.900], locale fr-FR)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.4.5)
[√] Android Studio (version 4.0)
[√] Connected device (3 available)
• No issues found!
提前感谢您的帮助
3条答案
按热度按时间ljsrvy3e1#
好的,只是暂时修复了这个bug。为了允许来自Chrome(网络)的cors,必须遵循几个步骤
简单的方法是:
要想直接在Chrome(网络)上运行应用程序,您需要进行大量更改。
更具体地说,你会看到应用程序运行的Chrome浏览器,它不是你真正的同步Chrome,它只是一个简单的空Chrome浏览器的镜像.
第1步:导航到flutter目录,然后转到flutter\bin\cache并删除一个名为:flutter_tools.stamp(为了在进行必要的更改后重建Flutter)
第2步:导航到flutter\packages\flutter_tools\lib\src\web并打开chrome.dart文件。
步骤3:在文件内部,必须删除一行
'--disable-extensions'
第4步:在同一个文件中,正好在
final List<String> args
规范之前,您应该添加final directory = 'C:\Users\{user_name}\{create_a_new_folder_and_add_here_its_name}';
,并将'--user-data-dir=${userDataDir.path}'
行更改为'--user-data-dir=$directory'
* 如果您不应用这些更改,则每次运行代码时都需要添加扩展名,因为它不会被保存。*步骤5:保存文件并重新运行代码。
步骤6:当浏览器打开时,它将允许您应用任何您想要的扩展。
步骤7:立即添加扩展名。
第8步:享受 Flutter 网。
jk9hmnmh2#
我在Flutter Web应用程序中进行HTTP请求时遇到了完全相同的问题,唯一的区别是我在Node.js中编写了服务器。
我知道你以前读过关于CORS的文章,但不要认为这是问题所在。然而,我真的建议你尝试一次,因为它对我来说就像一个魅力(现在我想起来了,它在以前的一个项目中也使用Flutter Web-flask!)
这里有一个线程,你可以开始看:Cross-Origin Request Headers(CORS) with PHP headers
对于像我这样使用Node的人来说,这确实很有帮助:Adding CORS support in Node.js
我真的希望你觉得这个有用
vybvopom3#
CORS问题解决方案1-转到flutter\bin\cache并删除名为以下文件的文件:flutter tools. stamp 2-转到flutter\packages\flutter tools\lib\src\web并打开chrome. dart文件。3-查找“--禁用扩展”4-添加“--禁用Web安全”