[BE] 2. Node.js+Ngrok - CORS 오류 해결

아직 배포 자동화를 설정해놓지 않아서 그동안 프론트에서 API를 사용할 때는 Ngrok을 사용하기로 했다.

Ngrok은 외부에서 로컬에 접속할 수 있게 해주는 터널 프로그램이다.

이걸 이용하면 돈을 쓰지 않고도 외부에서 localhost를 사용할 수 있게끔 해준다.

 

설정은 아래를 참고했다.

(출처) https://yunwoong.tistory.com/131 

 

Ngrok을 실행하고 Postman으로 했을 때는 문제없었다. 그런데 직접 프론트에 적용해서 하려고 하니 CORS 오류가 발생하였다.

 

이런 오류가 발생해서 원인을 찾아 해결하고자 했다.

 

1) CORS 모듈 설치 후 코드 작성

먼저 처음에는 아래를 참고해서 설정했다.

(참고) https://surprisecomputer.tistory.com/32

 

저번 프로젝트에서도 CORS 문제가 발생했었기 때문에 똑같이 하면 해결이 가능할 것이라 생각하고 cors를 설치한 뒤 app.js에 app.use(cors())를 사용했다.

그러나 되지 않았다...

 

2) Ngrok 설정

원인을 알지 못해서 계속해서 검색하고 찾아봤지만, 위와 같은 해결방법이 대부분이었고 다른 방법이 거의 없었다. 그러다가 찾은 아래의 사이트를 참고하여 설정해보았다.

(참고) https://cordcat.tistory.com/117

 

여기에서는 ngrok을 실행시킬 때 "ngrok http 8080" 말고 "ngrok --host-header=rewrite 8080"으로 실행시키라고 해서 그대로 했지만 이것 역시 되지 않았다 ㅜ 

 

3) Access-Control-Allow-Origin response 헤더에 추가하는 방식

(참고) https://firework-ham.tistory.com/70

마지막으로 찾은 방법으로 해보았다. 그치만 내가 라우터를 사용하는 방식은 app.use('/api', indexRouter)와 같이 사용했기 때문에 위의 방식과는 달랐다.

 

(참고 사이트)

app.get('/', (req,res) => {
  res.header("Access-Control-Allow-Origin", "*");
  ...
}

 

(내가 사용하는 방식)

app.use('/api', indexRouter);

그래서 이걸 어떻게 적용해야할지 조금 헤맸었다. 하지만 생각보다 간단한 방법으로 해결할 수 있었다.

 

(적용한 방식)

app.use(
  '/api',
  (req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    next();
  },
  indexRouter
);

중간에 함수로 넣어준 뒤, next를 이용하여 indexRouter로 넘겨주면 되는 것이었다!!

 

정말 간단한 방법인데 어떻게 해결해야할지 막막해서 머리가 안 돌아갔던 것 같다,,,

아마 배포할 때에도 CORS 문제를 맞닥뜨리게 될텐데 걱정이다,, 😥