使用http postflutter web时出现XMLHttpRequest错误

Posted 2023-02-22

【中文标题】使用http postflutter web时出现XMLHttpRequest错误

【英文标题】：XMLHttpRequest error while using http post flutter web

【发布时间】：2021-07-19 01:40:29

【问题描述】：

我在对我的 API-AWS API 网关进行 HTTP 发布调用时遇到此错误 XMLHttpRequest error.。我目前的 Flow 是 Fl​​utter web -> API gateway -> lambda -> rds。

我知道已经有几个与此 like 相关的问题，但正如其中一个答案所建议的那样，添加一些标题以响应 lambda。但它对我不起作用。

在做了一些研究后，我发现问题与 CORS 有关。现在在 chrome 中禁用 cors 是一个临时修复，并在此 question 中提出建议。

我在研究后发现的一些其他解决方案建议在我的 API 中启用 cors，并且在前端部分中我添加了标头，但它们都不起作用。

fetchData() async 
    String url =
        "myUrl";
    Map<String, String> headers = 
      "Access-Control-Allow-Origin": "*", // Required for CORS support to work
    ;
    String json = '"emailId":"emailId"';
    http.Response response =
        await http.post(Uri.parse(url), headers: headers, body: json);
    print(response.body);
    return response.body;
  

解决这个问题的正确方法是什么？

【问题讨论】：

能否请您添加您的 lambda 函数

【参考方案1】：

1- 转到flutter\bin\cache 并删除一个名为：flutter_tools.stamp 的文件

2- 转到flutter\packages\flutter_tools\lib\src\web 并打开文件chrome.dart。

3- 查找'--disable-extensions'

4- 添加'--disable-web-security'

【参考方案2】：

我已经解决了我的问题，并且不会删除这个问题，因为这个问题没有很多明确的解决方案。 对于使用 Flutter Web 和 AWS API-gateway 的 Future 查看者。

如果你遇到这个问题，这意味着它来自后端而不是来自 Flutter 端 XMLHttpRequest 错误。是由 CORS 引起的

您必须在 api-gateway 中启用 CORS 的问题的解决方案遵循此link。

但如果您使用代理与 lambda 和 api-gateway 集成，那么在这种情况下启用 CORS 将无济于事，您必须从 lambda 函数的响应中传递标头。喜欢

return 
    statusCode: 200,
     headers: 
  "Access-Control-Allow-Origin": "*", // Required for CORS support to work
  "Access-Control-Allow-Credentials": true, // Required for cookies, authorization headers with HTTPS
  "Access-Control-Allow-Headers": "Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,locale",
  "Access-Control-Allow-Methods": "POST, OPTIONS"
,
    body: JSON.stringify(item)
;

格式必须相同。此外，一个对我理解整个问题有很大帮助的特定问题是通过问题link 的各种答案。

现在我的问题来了，我做错了什么，我从前端传递 "Access-Control-Allow-Origin": "*", 并在 API 网关中启用 CORS 也会发送类似的标头，这对我来说是个问题

Access to XMLHttpRequest at 'API-URL' from origin 'http://localhost:63773' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.  //this particular line

所以在将我的功能更改为这个之后，一切正常

fetchData() async 
    String url =
        "API-url";
    Map<String, String> headers = 
      "Content-Type": "text/plain",
    ;
    String json = '"emailId":"emailId"';
    Map<String, String> map = Map();
    map["emailId"] = "[e-mail]";
    http.Response response = await http
        .post(Uri.parse(url), headers: headers, body: jsonEncode(map))
        .then((value) 
      print("onThen> " + value.body.toString());
    ).onError((error, stackTrace) 
      print("onError> " +
          error.toString() +
          " stackTrace> " +
          stackTrace.toString());
    );