Dio 错误，禁用网络安全时消失答案

【问题标题】：Dio error, disappears when web security is disabledDio 错误，禁用网络安全时消失
【发布时间】：2022-01-07 04:28:27
【问题描述】：

所以我需要尽快使用 Dart 向 Google Places API 发出请求，以获得 Flutter Web 应用程序。我正在使用 Dio 我找到了一些答案，它说如果我添加标头 XMLHttpRequest 错误将会消失。我添加了标题，问题仍然存在。我从一位软件工程师（我是新手）那里得到了一些帮助，尽管他对 Dio 不熟悉，但他在 Flutter SDK 中编辑了一个文件，该文件使用标志 --disable---web-security 禁用了安全性

path: C:\flutter\packages\flutter_tools\lib\src\web file: chrome.dart
(Here I only added the code block changed from the file)

final int port = debugPort ?? await _operatingSystemUtils.findFreePort();
final List<String> args = <String>[
  chromeExecutable,
  // Using a tmp directory ensures that a new instance of chrome launches
  // allowing for the remote debug port to be enabled.
  '--user-data-dir=${userDataDir.path}',
  '--remote-debugging-port=$port',
  // When the DevTools has focus we don't want to slow down the application.
  '--disable-background-timer-throttling',
  // Since we are using a temp profile, disable features that slow the
  // Chrome launch.
  '--disable-extensions',
  '--disable-popup-blocking',
  '--bwsi',
  '--no-first-run',
  '--no-default-browser-check',
  '--disable-default-apps',
  '--disable-translate',
  '--disable-web-security', //the line added
  if (headless) ...<String>[
    '--headless',
    '--disable-gpu',
    '--no-sandbox',
    '--window-size=2400,1800',
  ],
  url,
];

一旦禁用网络安全，Dio 就可以使用 API 正常工作。该请求被执行并根据 DevTools 控制台返回 200，但随后安全将其阻止。所以我的问题是我缺少什么标头，或者我应该向 Dio() 对象添加什么以重新激活网络安全并能够发出请求。

Dio request to Places API

try {
  var dio = Dio();
  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-Origin"] = "*";
  dio.options.headers["Access-Control-Allow-Methods"] =
      "GET, HEAD, POST, OPTIONS";

  dio.options.responseType = ResponseType.json;
  String url =
      autocompleteUrl(search, sessionToken, locale, components, placeType);
  //print(url);
  var response = await dio.get(url);

  var json = convert.jsonDecode(response.data);

  var jsonResults = json[_f.predictions] as List;

  return jsonResults.map((p) => PlaceSearch.fromMap(p)).toList(); //modeling the response
} on DioError catch (e) {
  return null;
}

感谢您抽出宝贵时间提供帮助。

编辑：

当我打印错误数据时，它会显示出来

请求：空
消息：XMLHttpRequest 错误。
DioError [DioErrorType.RESPONSE]: XMLHttpRequest 错误。

开发工具中的错误：
从 'https://maps.googleapis.com/maps/api/place/autocomplete/json?input=a&key=keyg&sessionToken=e1f7496d-a62e-437d-877d-d93e5045e22d&language=null&components=country:us&types=address' 访问 XMLHttpRequest来源“http://localhost:49234”已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

【问题讨论】：

你能发布错误吗？
我一直在尝试再次启用网络安全以使错误显示出来，老实说是无法做到的。然而，这是我遇到的错误。 github.com/flutterchina/dio/issues/750
发现错误，在编辑时发布

标签： flutter http dart http-headers dio

【解决方案1】：

导致错误的同源策略仅在请求是从客户端到服务器而不是从服务器到服务器时发生。所以我创建了一个云函数来发出请求并返回响应。以下是打字稿中的功能

import axios from "axios";

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

【讨论】：