使用 http post flutter web 时出现 XMLHttpRequest 错误

Question

我在对我的 API-AWS API Gateway 进行 HTTP post 调用时遇到此错误

XMLHttpRequest error.

。我当前的流程是 Flutter web -> API gateway -> lambda -> rds。

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

经过一些研究，我发现问题与 CORS 有关。现在在 chrome 中禁用 cors 是一个临时修复，并在此问题中建议。

我在研究后发现的一些其他解决方案建议在我的 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;
  }

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

Answer 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'

Answer 2

我已经解决了我的问题，并且不会删除这个问题，因为这个问题没有很多明确的解决方案。 对于使用 flutter web 和 AWS API 网关的未来观众。

1. 如果你遇到这个问题，这意味着它来自后端而不是来自 flutter 侧
2. XMLHttpRequest 错误。是由于CORS造成的

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

但是如果您使用 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"] = "[email protected]";
    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());
    });
  }

Answer 3

检查 HTTP 和 HTTPS 和端口 80

我的 Flutter 项目遇到了问题，该项目在我的 Android 设备上运行正常，但在 Google Chrome 上运行不正常。该错误消息表明 XMLHttpRequest 存在问题。经过一番排查后，我发现问题的根源与使用未加密的 HTTP 连接有关。通过检查 HTTP 和 HTTPS 的 URL，我能够识别问题并采取适当的措施来纠正它。

Answer 4

在 flutter web api 中

Access-Control-Allow-Origin

在标头中使用可能会解决此问题。

header("Access-Control-Allow-Origin: header");

Answer 5

在你的后端 php 文件中添加此代码

 <?php
 header("Access-Control-Allow-Origin: *");

完成！

Answer 6

它有效！ ^^ 如果您在后端使用 php，请添加以下行

   <? php  
header('Access-Control-Allow-Origin: *');   
header("Access-Control-Allow-Credentials: true");  
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS'); 
header('Access-Control-Max-Age: 1000');  
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token , Authorization');