-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
proxy를 사용할때와 사용하지 않을때 img 태그의 차이점?
21.08.09 18:46 작성 조회수 315
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
//
//
//
안녕하세요. 저는 이 강의를 들을때 boiler plate를 쓰지 않았습니다.
그냥 혼자서 만든 boiler plate에 사용하고 있습니다.
저는 module에서 proxy값을 설정하지 않고, 그냥 cors 설정을 통해서 클라와 서버간에 통신을 시켜주고 있는데요.
궁금한점은
<img src={`http://localhost:5000/${image}`}></img>
이 부분입니다.
즉, 위 img테그는 get요청을
http://localhost:5000/uploads/이미지파일.jpg
위의 경로 보내게 됩니다.
그런데 저는 도통 이미지가 출력이 되지 않더군요.
그 이유가 혹시 proxy 설정을 해주지 않아서인가요?
즉. proxy설정을 하게되면,
http://localhost:5000/uploads/이미지파일.jpg
이 경로로 브라우저에서 enter를 치면 이미지파일이 보이나요?
저는 cors설정을 해서 그런지
http://localhost:5000/uploads/이미지파일.jpg
크롬에서 저 주소값을 enter를 치면 이미지파일이 보이지 않앗습니다.
그래서 fs.readfile을 써서 이미지파일을 읽어올수있게 바꿔서 설정했거든요.
음...proxy가 도대체 어떤 역할을 하길래, img파일가지 다 읽어주는지 궁금해서 질문드려봅니다.
답변을 작성해보세요.
1
John Ahn
지식공유자2021.08.16
안녕하세요 기운님 !
Cors를 쓰는게 더 이상적인것 같습니다... 저도 강의를 다시 찍는다면 cors를 사용할것같아요 ㅎㅎ
우선 질문해주시는 부분이 image 경로 부분인데 그 경로를 정해주는 부분은 proxy 보다는 node.js에서 설정해준 부분을 보면 됩니다. 현재 node.js 가 정적파일을 제공해주는데 그 부분을 설정해주는 부분이
index.js 파일에 보시면
//use this to show the image you have in node js server to client (react js)
app.use('/uploads', express.static('uploads'));
이렇게 써놓은 부분을 볼수있습니다.
이게 의미하는 것은 uploads 폴더에 들어있는 정적파일을 제공할 때 uploads 라는 경로를 사용해서 가져갈수있다는 것입니다.
https://expressjs.com/ko/starter/static-files.html
여기를 참조해주세요 ~!
답변 1