Flutter DIO 库 XMLHttpRequest 报错 Web答案

【问题标题】：Flutter DIO library XMLHttpRequest error WebFlutter DIO 库 XMLHttpRequest 报错 Web
【发布时间】：2021-10-02 09:08:59
【问题描述】：

我正在使用 Flutter DIO 库。它在我的 Android 应用程序上运行良好，但在 Web 上出现错误。 Error: DioError [DioErrorType.response]: XMLHttpRequest error.

如果我尝试使用与 http 相同的 url，它在 Web 上工作正常。我的 Dio 库代码

Dio dio = Dio();
dio.options.method = "POST";
dio.options.headers["Access-Control-Allow-Origin"] = "*";
    dio.options.headers["Access-Control-Allow-Credentials"] = true;
    dio.options.headers["Access-Control-Allow-Headers"] =
        "Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,locale";
    dio.options.headers["Access-Control-Allow-Methods"] =
        "GET, HEAD, POST, OPTIONS";
var response = await dio
        .post('http://45.79.124.182/app_php/PagarGuru_test/requestAdd.php');

错误日志

C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 908:28   get current
packages/dio/src/dio_mixin.dart 819:20                                                                            assureDioError
packages/dio/src/dio_mixin.dart 678:13                                                                            _dispatchRequest
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 60:31   <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1692:54                                 runBinary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 175:22                           handleError
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 779:46                           handleError
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 800:13                           _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 610:5                            [_completeError]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 666:7                            callback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 40:11                     _microtaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 49:5                      _startMicrotaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15  <fn>
    at Object.throw_ [as throw] (http://localhost:58438/dart_sdk.js:5374:11)
    at http://localhost:58438/packages/dio/src/interceptors/log.dart.lib.js:1390:21
    at _RootZone.runBinary (http://localhost:58438/dart_sdk.js:40508:58)
    at _FutureListener.catchError.handleError (http://localhost:58438/dart_sdk.js:35445:33)
    at handleError (http://localhost:58438/dart_sdk.js:36033:51)
    at Function._propagateToListeners (http://localhost:58438/dart_sdk.js:36059:17)
    at _Future.new.[_completeError] (http://localhost:58438/dart_sdk.js:35905:23)
    at _SyncCompleter.new.[_completeError] (http://localhost:58438/dart_sdk.js:35363:36)
    at _SyncCompleter.new.completeError (http://localhost:58438/dart_sdk.js:35286:29)
    at onError (http://localhost:58438/dart_sdk.js:35131:60)
    at _RootZone.runBinary (http://localhost:58438/dart_sdk.js:40508:58)
    at _FutureListener.then.handleError (http://localhost:58438/dart_sdk.js:35445:33)
    at handleError (http://localhost:58438/dart_sdk.js:36033:51)
    at Function._propagateToListeners (http://localhost:58438/dart_sdk.js:36059:17)
    at _Future.new.[_completeError] (http://localhost:58438/dart_sdk.js:35905:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:58438/dart_sdk.js:35944:31)
    at Object._microtaskLoop (http://localhost:58438/dart_sdk.js:40808:13)
    at _startMicrotaskLoop (http://localhost:58438/dart_sdk.js:40814:13)
    at http://localhost:58438/dart_sdk.js:36279:9

我尝试了其他论坛的答案，但没有帮助。

我的整个项目都是基于 Dio 库的。

我该怎么办？

【问题讨论】：

参考我的回答here希望对你有所帮助
使用 http 库可以正常工作，但不能使用 duo 库，并且请求中已经添加了标头仍然给出错误
错误是什么
相同的错误日志：C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 908： 28 获取电流

标签： flutter http web-applications xmlhttprequest dio

【解决方案1】：

错误是由same-origin policy 引起的。但是，此策略仅适用于从客户端向服务器发出的请求。解决方案是创建一个在您的服务器中运行的函数，该函数将发出请求，等待其完成并返回任何相关数据。并调用该函数而不是 dio。

我使用了 firebase 并通过云功能解决了这个问题。

import axios from "axios"; // install by running **npm install axios** inside your functions folder

export const serverRequest = functions.https.onCall(async (url, context)=> {
  const response = await axios.get(url as string).then(({data})=> data);
  return response;
});

上面的函数是一个 get 请求的例子，在你的情况下，只需将其更改为 post 请求，将数据和 URL 作为参数传递，它应该可以工作。

【讨论】：