[Flutter] web 실행시 httpRequest error 발생

Flutter 앱을 chrome 으로 실행하려고 할때 httpRequest 의 경우 에러가 발생합니다.

flutter sdk에서 막혀있어서 그러는데요.

아래와 같이 조치를 취해서 실행해볼 수 있습니다.

(오래전부터 있었던 사항인데, 저도 종종 sdk update 하고 나서 잊어버리고 실행안되서 해매는 부분이라 적어봤습니다.)

 

 

1-  flutter\bin\cache 폴더에서  flutter_tools.stamp 을 삭제합니다.

2-  flutter\packages\flutter_tools\lib\src\web 에서  chrome.dart 를 에디터로 엽니다.

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

4-  다음 줄에 '--disable-web-security' 을 추가 합니다.

 

이렇게 하고 테스트를 해보세요.

 

추가로 잡설을 하자면, CORS 문제인데요.

CORS (cross-origin resource sharing) 즉 WEB의 기본인 SOP(Same Origin Policy) 와 반대되는 상황입니다.

두 URL의 구성 요소 중 Scheme, Host, Port, 이 3가지가 동일해야 같은 출처 (같은 origin) 으로 판단되기 때문에 이를 해결하기 위해서 기본적으로 서버에서 CORS 를 허가해줘야 합니다.

예를 들면 아래와 같은 방식이죠.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,PUT,PATCH,POST,DELETE");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

 

그러나 CORS 를 허가 해준다는 의미는 외부에서 접근을 할수 있는 방법을 하나 열어준것이기 때문에 서버입장에서는 더 보안 리스크를 안고 가는 것이 되겠죠?

 

flutter의 테스트를 chrome으로 해보는 입장이라면 그냥 위와 같이 flutter sdk에서 security 옵션을 정리하는 것으로 하는 것이 편리할 것입니다. 

 

 

 

 

!해피 코딩.!!