[ngrok] ERR_NGROK_3004 / ERR_NGROK_3200 / ngrok-skip-browser-warning

[ngrok] ngrok 설치 및 실행

 

위처럼 설치를 진행하고 이용하려고 하는데

에러가 뜬다 

 

 

너무 다양한 에러가 떠서 수많은 상황들 끝에 진행상황을 올린다

 

1.  ERR_NGROK_3200

이때 확인을 해보았을 때 이 경로로 이어지는 부분이 오프라인이라는 메시지가 함께 나왔다

그래서 혹시 몰라서 포트 번호가 다른 곳에서 겹쳐서 쓰고 있지는 않을까 싶어서

포트 번호를 바꿔서 다시 실행을 했더니 이 부분은 사라졌다

 

 

2.  ERR_NGROK_3004

사실 이 에러를 만나기 전에 아래에서 나오는 화면을 먼저 만났는데 

혹시 다른 사람들의 후기들을 보고 다양하게 시도하면서 이 에러가 나왔다

내가 실행한 명령어는

ngrok http 3007

이렇게 실행을 했었는데 

가입하고 authToken을 설정하고 나면

ngrok http https://localhost:3007

이렇게 명령어를 넣어줘야 한다는 글을 보고 위처럼 실행해 봤다

그런데 똑같아서 

ngrok http --host-header=write https://localhost:3007

이걸 추가해줬는데 되었다는 글을 보고 나도 추가해 봤는데...

오히려 위처럼 3004 에러가 나왔다

그래서 되돌려서 ngrok http 3007로 작성하니 위 에러는 안 나오게 되었다

 

 

3. 

 

위 페이지는 ngrok 무료 플랜에서 발생하는 보안 경고 페이지였다 무조건 첫 페이지에서 띄워지게 된다

 

 

그래서 내가 보내는 url이 다른 팀에서 만드는 프로젝트 안에서 일부를 채우는 부분이라서 

데이터를 가져올 때 위 페이지가 먼저 가져오게 되면서 내가 내보내고 있는 url이 제대로 실행이 되지 않았다

위에 있는 'Visit Site'버튼을 클릭 시 그다음부터는 내가 내보내는 로컬 페이지가 들어오고 있는 게 보이지만 프로젝트 안에서 또 실행이 되고 있기 때문에 해결이 되지 않았다

 

이를 해결하기 위해서는 방법이 여러 개 있는데

1. 헤더에 아래처럼 추가해 주기 

fetch("ngrok-url", {
  headers: { "ngrok-skip-browser-warning": "true" }
})

 

2. ngrok 유료 플랜 사용하기라고 한다. 허허허허 

 

그래서 가장 간단한 방법인 headers: { "ngrok-skip-browser-warning": "true" }를 추가해 주는 것이 가장 간단한데

 

이거는 다른 팀에서 사용하고 있는 프로젝트에서 추가해주어야 했기 때문에 

다른 방법은 없나 더 찾아보았다

 

 

그래서 다른 방법을 찾게 되었는데 크롬에서 확장프로그램을 깔아서 위 headers를 추가해 주는 것이다

 

ModHeader - Modify HTTP headers - Chrome 웹 스토어

값은 아무거나 넣어줘도 된다고 나와있었고 나는 위처럼 넣어서 진행했고 

바로 해결이 되었다