에러 예시
Http request raises XMLHttpRequest error
해결방법
dev 모드 한정으로 "--disable-web-security" 명령어를 추가하는 것으로 문제를 해결할 수 있다.
설명
이 문제는 flutter web에서만 발생하는 문제다.
만약 avd를 webbrowser가 아닌, (안드로이드/아이폰/맥/윈도우/리눅스)에서 발생한 문제라면 다른 글을 찾아보길 바란다.
내 경우 컴퓨터 사양의 문제로 인해 (안드로이드/아이폰) avd를 사용하면 메모리 과부하로 인해 원활한 테스트가 불가능하다.
이로 인해 webbrowser를 avd로 설정해서 사용하는데, 다른 환경(dart/안드로이드)에서는 http 패키지를 이용한 크롤링이 정상적으로 작동하는 반면,
web avd를 실행할 때만 XMLHttpRequest error가 발생하고 있었다.
구글에 "Http request raises XMLHttpRequest error" 키워드로 검색을 하더라도 시원한 해결방법을 찾을 수 없는데, 아마도 이 문제가 flutter web에서만 발생하는 문제인데 사람들이 flutter web에서 발생한 문제라는 것을 밝히지 않았기 때문으로 보인다.
문제의 원인
문제의 원인은 웹브라우저의 CORS 정책 때문이다.
"Http request raises XMLHttpRequest error" 키워드가 아닌 "flutter web http XMLHttpRequest error" 키워드로 검색해보니 다음과 같이 flutter web에서 크롤링을 하는 경우 XMLHttpRequest error가 발생하는 내용을 다룬 토론이 있는 것을 확인할 수 있었다.
링크 1: https://github.com/flutter/flutter/issues/119297
링크 2(링크 1에서 제공됨): https://github.com/flutter/flutter/issues/51125
내용을 보면 알겠지만, 문제의 원인은 플러터나 다트의 문제가 아닌 웹브라우저의 CORS 보안 정책때문이라는 것이다.
Same Origin Policy라고 하면 무엇인지 어느 정도 감이 잡히는 사람도 있을 것 같다.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
비슷한 예로 aaa.com에서 bbb.com을 보여주는 식으로 iframe으로 구현을 하면 웹브라우저 콘솔에 XMLHttpRequest error가 기록되는 것을 확인할 수 있는데, 이 역시 CORS 보안 정책으로 인한 것이다.
해결 방법
flutter web이 아닌 다른 방법으로 테스트한다.
단, 나와 같이 컴퓨터 사양 문제로 인해 web으로 테스트하는 경우, 매력적인 제안은 되지 못할 것이다.
avd를 적은 점유율로 사용하는 방법에 관심이 있다면 이 글을 보는 것이 도움이 될 수 있다.
부분적인 해결 방법
최선책은 --disable-web-security 옵션을 사용하는 것이다.
이러면 문제 발생 자체를 막을 수는 있으나, 개인적으로는 선호하지 않는 방법이었다.
차선책은 크롤링 작업을 따로 실행한 다음, database에 저장하고 flutter web에서 저장된 database를 읽어오게 하는 것이다.
나와 같이 테스트 용도로 web avd를 사용하는 것이라면 조금 귀찮긴 해도 이 방법을 사용하면 될 것 같다.