在flutter中,对google api的http请求出现XMLHttpRequest错误



当使用http包向google api(directions api(发送http请求时,我收到以下错误:

Error: XMLHttpRequest error.
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 963:28                get current
packages/http/src/browser_client.dart 69:22                                       <fn>
dart-sdk/lib/async/zone.dart 1685:54                                              runUnary
dart-sdk/lib/async/future_impl.dart 147:18                                        handleValue
dart-sdk/lib/async/future_impl.dart 766:44                                        handleValueCallback
dart-sdk/lib/async/future_impl.dart 795:13                                        _propagateToListeners
dart-sdk/lib/async/future_impl.dart 557:7                                         [_complete]
dart-sdk/lib/async/stream_pipe.dart 61:11                                         _cancelAndValue
dart-sdk/lib/async/stream.dart 1530:7                                             <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 334:14  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 339:39  dcall
dart-sdk/lib/html/dart2js/html_dart2js.dart 37309:58                              <fn>

at Object.createErrorWithStack (http://localhost:54316/dart_sdk.js:5093:12)
at Error._throw (http://localhost:54316/dart_sdk.js:20399:18)
at Error.throwWithStackTrace (http://localhost:54316/dart_sdk.js:20396:18)
at async._AsyncCallbackEntry.new.callback (http://localhost:54316/dart_sdk.js:40921:18)
at Object._microtaskLoop (http://localhost:54316/dart_sdk.js:40778:13)
at _startMicrotaskLoop (http://localhost:54316/dart_sdk.js:40784:13)
at http://localhost:54316/dart_sdk.js:36261:9

这是我的http请求:

import 'package:http/http.dart' as http;
import 'dart:convert';
import 'constants.dart';
class Directions {
Future<void> getRouteInfo() async {
final url = Uri.parse(
'https://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&key=$googleAPIKey');
final response = await http.post(url);
print(response.statusCode);
final relevantBody = json.decode(response.body)['routes'][0]['legs'][0];
}
}

我的谷歌帐户已激活计费。API密钥在同一个Flutter应用程序中与其他谷歌API一起工作,不会出现错误。当我复制&将请求中的url粘贴到浏览器中我得到了正确的结果。当我试图打印响应状态时,我无法打印,因为之前抛出了错误,并且没有响应。

我知道有一个解决方案涉及禁用网络安全,但这只能在本地工作,我需要它在生产中工作。这与CORS有关吗?

我最终使用了这个答案来解决这个问题。基本上,你需要使用一个代理,然后添加一个CORS头发送回你的浏览器。我和Heroku一起创造了一个。

最新更新