Amplify.Api.get issue in Flutter Web

Question

I'm asking this question in a few places in hope someone with more clues than me can help :-)

I am having a problem using the AdminQueries function in my flutter app when running in web.

This is my function to list users in a group:

Future<void> listAdmin() async {
 const path = "/listUsersInGroup";
 final query = {
 "groupname": "Admins",
 };
 const apiName = "AdminQueries";
 try {
 final restOperation = Amplify.API.get(
 path,
 queryParameters: query,
 apiName: apiName,
 );
 final response = await restOperation.response;
 print('GET call succeeded: ${response.decodeBody()}');
 } on ApiException catch (e) {
 print('GET call failed: $e');
 }
 }

If I run the function in my IOS simulator it works. If I run it in Chrome (web) it crashes with the following error:

Error: GET https://########.execute-api.ap-southeast-2.amazonaws.com/dev/listUsersInGroup?groupname=Admins failed: TypeError: Failed to fetch packages/aws_common/src/js/fetch.dart 366:10 

It's got me beat so I am reaching out here to see if anyone has an idea. The rest of my app works fine in web so this is kind of a sticking point for me.

Cheers

• Richard Heap: Open the browser developer tools > Network tab before making the request. Does that give any more details? (perhaps a CORS error?)
• DBC: Hi @RichardHeap, yes opening Developer tools shows a CORS Error. Weird it works in IOS but not the web version (the joy of flutter I guess) With the Amplify AdminQuiries function you can add some IAM's goodness in there but the fact it works on my other platform with the same user makes this very specific to web. Still scratching

Answer 1

Thanks to @RichardHeap who led me down the path of checking CORS in the browser and that was my problem.

Being an API noob CORS was something I didn't know that I didn't know. This is definitely a work around but I can keep going now. I will have to sort it for production reading through the post below.

I found this post Solve Flutter Web API CORS which shows how to disable CORS checks in your local dev environment which suits me fine.

Hope this helps anyone else who runs into this pickle.