XMLHttpRequest error while using http post flutter web

Question

I am facing this error XMLHttpRequest error. while making an HTTP post call to my API-AWS API Gateway. My current Flow is Flutter web -> API gateway -> lambda -> rds.

I know there are already a couple of question-related to this like but as suggested in one of the answers to add some headers in response to lambda. but it doesn't work for me.

After doing some research I found out that the problem is regarding to CORS. now disabling cors in chrome is a temporary fix and suggested in this question.

some other solution that I found after researching suggested to enabled cors in my API and also in the frontend part I have added headers but none of them works.

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;
  }

what is the correct way of solving this problem?

Answer 1

1- Go to flutter\bin\cache and remove a file named: flutter_tools.stamp

2- Go to flutter\packages\flutter_tools\lib\src\web and open the file chrome.dart.

3- Find '--disable-extensions'

4- Add '--disable-web-security'

Answer 2

I have Solved my problem, and not going to delete this question because there aren't many well-defined solutions to this problem. For Future viewer who is using flutter web and AWS API-gateway.

1. if you encounter this problem it means its from backend side not from flutter side
2. XMLHttpRequest error. is caused due to CORS

The solution to the problem you have to enable CORS in api-gateway follow this link.

but if you are using proxy integration with lambda and api-gateway then in that case enabling CORS doesn't going to help, you have to pass on headers from the response of lambda function. like

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)
};

the format needs to be the same. also, one particular question that helps me a lot to understand this whole issue is going through the various answer of the question link.

Now comes my problem, what I'm doing wrong i that i am passing "Access-Control-Allow-Origin": "*", from frontend and enabling CORS in API gateway also send similar headers which are creating a problem for me

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

So after changing my function to this everything works perfectly fine

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"] = "fake@gmail.com";
    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

To check HTTP and HTTPS and Port 80

I encountered an issue with my Flutter project, which was functioning properly on my Android device, but not on Google Chrome. The error message indicated a problem with XMLHttpRequest. After conducting some troubleshooting, I discovered that the root of the issue was related to the use of unencrypted HTTP connections. By checking the URLs for HTTP and HTTPS, I was able to identify the problem and take appropriate action to rectify it.

Answer 4

In flutter web api Access-Control-Allow-Origin use in header to might resolve this issue.

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

Answer 5

in your backend php file add this code

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

finish!