처음 연결해본 개발자라면 아래와 같은 에러코드를 볼 것이다.

** XMLHttpRequest error**

통신은 하는데 값들이 보내지지 않는다...ㅋㅋㅋ 통신은 하나 값을 받지 못하는 상황....상당히 어이가 없는 상황이다. 그리고 아래의 검색어로 구글링해도 정답을 명확하게 알려주지 않더라. (검색어:XMLHttpRequest error, flutter XMLHttpRequest error, flutter web XMLHttpRequest error)

결론은 위의 글은 우문현답을 원하는 그런 검색어였다. (검색어에 문제가 있었다, Flutter Web이 아닌,APIGateWay쪽으로 검색을 했어야했다.)

이슈 포인트는 flutter Web에서도, Lambda에서도 아닌 APIGateway(API 게이트웨이)였다.

이유는 명확하며, APIGateway의 CORS(Cross-Origin Resource Sharing) 설정 때문이였다. 아래는 기본 APIGateWay 설정이다.

위는 API GateWay의 기본 설정 값이다.(생성하면 그냥 있는 값) 여기 ACAH나 ACEH,ACAM등 다 건드려봤는데

가장 중요한건 ACAO(Access-Control-Allow-Origin)이였다.

ACAO(Access-Control-Allow-Origin)에 https://와 http://를 기입하면 정상작동한다.

백엔드쪽으로 감이 있는 개발자라면, 이제 느낌이 확실히 들 것이다.

아무리 Lambda쪽에서 CORS대응을 해놨더라도, 제대로 CORS대응을 하지 않은 이유는, 앞단에 있는 API GateWay가 CORS에 대응하고 있지 않아서였다. (https://*는 https://로 시작하는건 모두 허용 이런 개념이다. http://이것도 마찬가지)

이렇게 처리해보면 정말 간단한 CORS대응인데,

Flutter Web이랑 연관 지어서 생각을하면 복잡한문제가 되어버린다. (Flutter Web이 아직 불안정하고 당연한게 안되는 경우가 몇몇 있기에 생각의 방향이 그쪽으로 가는것 같다.)

본인의 서버 환경은 Nodejs기반이며,

Flutter Web에서 Lambda(API Gateway에 연결된)로 연결한 소스는 아래와 같다.

import 'package:http/http.dart' as http;

Future<String> apiHttp({String targetURL, var body, String des}) async {  
  try {
    var _body = jsonEncode(body);
    var response = await http.post(targetURL, body: _body);
    print("API: $des is Complete");
    return response.body;
  } catch (e) {
    //서버에서 팅구는 경우
    print("[Error]$des: catch/ url=> $targetURL // $e");
    return '{"code":500}';
  }
}

추가로,보안이라던지 헤더로 뭔가를 처리하고 싶다면 헤더를 기입해도 좋지만, 그런경우에는 ACAH(Access-Control-Allow-Headers)에 추가해놔야한다. 안그러면 되는것도 막혀서 안된다.

(EC2로 연결할때는 꼭 Header에 아래의 헤더를 넣어줘야한다.

Map<String, String> headers = {'Content-Type': "application/json"};//이거 안넣으면 EC2기반 Nodejs백엔드 서버에서는 Body값을 가져오지 않는다.

이상, Flutter Web으로 AWS기반 서버리스(Lambda) 시스템 구축할때, Lambda에서 보낸 값들을 받지 못할때, 도움이 되길 바라는 글이며, 2021년도에는 Flutter가 더 매력적으로 성장할것 같으니 Flutter에 많은 관심을 바랍니다.

*결론: 통신은 하는데 값이 안보내진다? API GateWay에서 개발탭-CORS탭에서 ACAO(Access-Control-Allow-Origin)에 https://와 http://를 기입하면 정상작동한다. *

다음 작성 예정 글: Lambda-Dynamodb를 쉽게 연결하는 방법(Lambda에 규칙설정x)