Dartpad 和所有 Web 应用程序上出现 XMLHttpRequest 错误，但手机或模拟器上则不然

Question

我正在使用 DartPad 运行一个简单的测试，但它不起作用。因此，我尝试使用 Visual Studio Code 和 USB 电缆在 Android 手机上运行，效果很好。然后我通过 VSC 尝试了 Android 模拟器，它可以工作。我在 Chrome 和 Edge 上通过 VSC 进行了尝试，但失败了，在 Windows 上进行了尝试，结果成功了。

这是代码：

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
//import 'package:logging/logging.dart';

final filename = <String>[
  "https://ListeningToGod.org/SermonEngagement/TextFiles/2024-10-130Ia.json",
  "https://ListeningToGod.org/SermonEngagement/TextFiles/2024-10-1301a.json",
  "https://ListeningToGod.org/SermonEngagement/TextFiles/2024-10-1302a.json",
  "https://ListeningToGod.org/SermonEngagement/TextFiles/2024-10-1303a.json",
  "https://ListeningToGod.org/SermonEngagement/TextFiles/2024-10-1304a.json",
  "https://ListeningToGod.org/SermonEngagement/TextFiles/2024-10-1305a.json",
  "https://ListeningToGod.org/SermonEngagement/TextFiles/2024-10-1306a.json",
  "https://ListeningToGod.org/SermonEngagement/TextFiles/2024-10-1307a.json",
  "https://ListeningToGod.org/SermonEngagement/TextFiles/2024-10-1308a.json",
  "https://ListeningToGod.org/SermonEngagement/TextFiles/2024-10-1309a.json",
];

void myLog(String s) {
  if (kDebugMode) {
//    final log = Logger('checkUrl');
//    log.shout(s);
    print(s);
  }
}
Map <String,String>? userHeader = {"Content-type": "text/plain",
                                   "Accept": "application/json","Access-Control-Allow-Origin": "*", 'Access-Control-Allow-Credentials': 'true','Access-Control-Allow-Methods' : 'OPTIONS, GET, POST','Access-Control-Allow-Headers': 'Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control'};
Future<bool> _checkUrl(String url) async {
  try {
    http.Response urlResponse = await http.get(Uri.parse(url),
    headers: userHeader,
  );
    myLog("File = $url Status code = ${urlResponse.statusCode}");
    return ((urlResponse.statusCode == 200) ? true : false);
  } catch (error) {
    myLog("Catch Error$error");
  }
  return false;
}

Future<int> getMaxEngagementIndex() async {
  int index = 0;
  for (int i = 0; i < filename.length; i++) {
    String engagementFileName = filename[i];
    try {
      bool filePresent = await _checkUrl(engagementFileName);
      if (filePresent) {
        myLog("Got File $engagementFileName");
        index++;
      }
    } catch (error) {
      myLog("Catch = $error");
    }
  }
  return index;
}

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  int numfiles = await getMaxEngagementIndex();
  String num = numfiles.toString();
  runApp(MyApp(num));
}

class MyApp extends StatelessWidget {
  final String numfiles;
  const MyApp(this.numfiles, {super.key});
  Text seText(String text, double size, Color? color) {
    return Text(
      text,
      textAlign: TextAlign.center,
      style: TextStyle(
        color: color,
        fontSize: size,
        fontWeight: FontWeight.bold,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: true,
      home: Scaffold(
        body: Center(
          child: seText('Num Files =$numfiles', 30, Colors.black),
        ),
      ),
    );
  }
}

根据 Dartpad 的错误消息和 StackOverflow 上的各种问题，我尝试了各种标头，但似乎都没有消除该错误。 这是我在 Dartpad 中遇到的异常： 捕获 ErrorClientException：XMLHttpRequest 错误。，uri=https://listeningtogod.org/SermonEngagement/TextFiles/XXX.json 其中 XXX 是每个 json 文件名。

flutter 中的 http 包说它应该在 Web 上工作 - 但我没有让它工作。 有这方面的帮助吗？

Answer 1

CORS 是为了安全起见，并在服务器上强制执行，所以我担心您在这里所做的事情只能在本地工作，即在生产中运行 Web 应用程序时无法工作。