[NextJS + Express] Express에 저장된 이미지 불러오기 (외부 이미지 불러오기)

CORB문제 

1. 나의 상황

나는 현재 localhost3001번 포트에서 next js를 이용한 프론트 엔드 서버를 localhost:5000번에서는 express를 이용한 백엔드 서버를 구현하였다. 또한 express에서는 mongoDB와 연동을 통해 백엔드 서버를 구축하였다. 

 

2. 문제 상황

localhost:3001번 포트와 localhost:5000번 포트는 서로 포트 번호가 다르다. 따라서 Cross-Origin-Resource Sharing(CORS)정책을 만족하지 못했다. 따라서 앞선 포스팅에서 proxy설정을 해주어 이 api문제를 해결해주었다. 하지만 여전히 이미지 파일은 불러오지 못하는 문제가 존재했다. 

 

3. 이미지 불러온 방법

nextJS - localhost:3001

axios호출

axios get method를 통해 express의 api를 받아왔다. 

원래는 Cors정책위반으로 호출이 안되지만 나는 앞선 포스팅에서 언급했듯이 

rewrites를 통해 proxy설정을 해주었으므로 호출할 수 있었다. Cors란 브라우저가 서버에 요구하는 것은 허용하지 않지만 서버가 서버에게 요구하는 것은 막지 않기 때문에 다음과 같은 방법을 쓴다. 

 

Express-localhost:5000

express에서 응답하는 api는 다음과 같은데 header에 cross-origin을 허용한다는 헤더를 추가해주어도 되지만 나는 proxy설정을 해주어서 안해도 상관없긴 하다. 

그리고 mongoDB의 singleAlbum schema에는 저장된 이미지 파일의 백엔드 단 URL이 포함되어 있어서 다시 프론트nextjs에게 이 이미지의 경로를 보내주는 형식으로 진행하였다. 

이렇게 express서버에 저장되어 있는 이미지를 쉽게 불러올 수 있을 줄 알았지만....

 

나는 여기까지 한 후 거의 5시간 넘게 왜 문제가 안되는지 파악하지 못하였는데 해결을 한 지금 결론은 다음과 같다.

 

 Express에서 정적 파일을 제공해주려면 그 파일이 있는 디렉토리 위치를 static이라는 것을 명시해주어야한다. 

이 static을 명시해주지 않으면 express는 브라우저에게 정적인 파일( 이미지 파일, 이벤트를 핸들링 해주는 js파일, css파일)등과 같은 정적인 파일들을 제공해주지 못한다. 

 

따라서 다음과 같은 설정을 통해 제공할 정적인 파일이 있는 위치를 static설정을 해주어야한다. 

내가 express서버에 저장한 이미지의 위치는 다음과 같았으므로 다음 디렉토리를 static선언 해주었다. 

 

4. 결과

잘불러져온다.... 나의 시간이여