Flutter 다트 코드로만 플러터 웹 API CORS 오류를 해결하는 방법은 무엇인가요?, How to solve flutter web api cors error only with dart code?

질문

웹 분야에서 CORS 오류는 잘 알려진 문제인 것 같습니다. 그러나 저는 처음으로 플러터 웹을 시도하면서 치명적인 오류를 마주쳤습니다.

아래 코드는 iOS 기기에서 앱 버전으로 실행될 때 잘 작동했지만, 베타 채널에서 웹 디버깅으로 Chrome에서 동일한 코드를 테스트하면 CORS 오류가 발생합니다.

다른 stackoverflow 답변들은 프로젝트의 서버 측 파일로 CORS 문제를 해결하는 방법을 설명합니다. 그러나 저는 서버가 무엇인지와 그들의 답변을 다루는 방법을 전혀 모릅니다. Chrome 콘솔에서의 오류 메시지는 다음과 같습니다.

[ Access to XMLHttpRequest at 'https://kapi.kakao.com/v1/payment/ready' from origin 'http://localhost:52700' 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. ]

그래서, 저는 위의 'Access-Control-Allow-Origin header' 문제를 DART 코드로만 해결하고 싶습니다! 아래 코드는 이러한 문제를 메인.dart로만 해결하려고 시도한 것입니다.

onPressed: () async {
      var res =
          await http.post('https://kapi.kakao.com/v1/payment/ready', encoding: Encoding.getByName('utf8'), headers: {
        'Authorization': 'KakaoAK $_ADMIN_KEY',
        HttpHeaders.authorizationHeader: 'KakaoAK $_ADMIN_KEY',
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE, HEAD",
      }, body: {
        'cid': 'TC0ONETIME',
        'partner_order_id': 'partner_order_id',
        'partner_user_id': 'partner_user_id',
        'item_name': 'cool_beer',
        'quantity': '1',
        'total_amount': '22222',
        'vat_amount': '2222',
        'tax_free_amount': '0',
        'approval_url': '$_URL/kakaopayment',
        'fail_url': '$_URL/kakaopayment',
        'cancel_url': '$_URL/kakaopayment'
      });
      Map<String, dynamic> result = json.decode(res.body);
      print(result);
    },

실제로 대부분의 다른 답변에서 권장하는 "Access-Control-Allow-Origin": "*" 헤더가 있었지만, Chrome 콘솔에서는 동일한 오류 메시지가 출력되었습니다. 이상한 점은 같은 코드가 모바일 앱 버전에서는 성공적인 요청을 만들었다는 것입니다. 그래서 저는 이것이 플러터 웹 버전만의 문제라고 생각합니다.

누군가 이것을 해결하고 메인.dart에서 문제를 해결할 수 있는 DART 코드를 제안해주길 바랍니다!! 읽어주셔서 감사합니다 [:

답변

1- flutter\bin\cache로 이동하여 flutter_tools.stamp라는 파일을 제거합니다.

2- flutter\packages\flutter_tools\lib\src\web으로 이동하여 chrome.dart 파일을 엽니다.

3- '--disable-extensions'를 찾습니다.

4- '--disable-web-security'를 추가합니다.