이미지 조회 404
141
작성한 질문수 9
리액트로 이미지를 조회하려는데 자꾸 404 Not Found가 반환되요.
포스트맨으로 동일한 조건으로 요청을 하면 제대로 이미지가 반환이 되네요.
async function getIamge(filename){
await axios.get(`http://localhost:8080/imageFiles/${filename}`)
.then((action)=>{
let data = action.data;
let copy = [...images,data];
setImages(copy);
})
.catch((error)=>{
console.log('서버 응답 코드:', error.response.status);
console.log('서버 응답 데이터:', error.response.data);
console.log('서버 응답 헤더:', error.response.headers);
})
}이런식으로 요청을 했습니다. img태그로 직접 엔드포인트로 요청을 보냈을 때도 똑같은 상황입니다.
@GetMapping("/imageFiles/{filename}")
@CrossOrigin(origins = "*")
public ResponseEntity<Resource> downloadExecute(@PathVariable("filename") String filename) throws IOException {
log.info("Full Path = {}", fileDir + filename);
String str = URLEncoder.encode(filename, "UTF-8");
Path path = Paths.get(fileDir + filename);
Resource resource = new InputStreamResource(java.nio.file.Files.newInputStream(path));
System.out.println("resource : "+ resource.getFilename());
return ResponseEntity.ok()
.header(HttpHeaders.CONTENT_TYPE, "application/octect-stream")
.header(HttpHeaders.CONTENT_DISPOSITION, "attachment;filename="+str+";")
.body(resource);
}이미지를 보내주는 서버측 엔드포인트입니다.
@Configuration
public class CorsMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
//.allowedOrigins("http://localhost:3000")
.allowedOrigins("*")
.allowedMethods(
HttpMethod.GET.name(),
HttpMethod.POST.name(),
HttpMethod.HEAD.name(),
HttpMethod.PUT.name(),
HttpMethod.DELETE.name()
);
registry.addMapping("/imageFiles/**")
.allowedOrigins("*")
.allowedMethods(
HttpMethod.GET.name(),
HttpMethod.POST.name(),
HttpMethod.HEAD.name(),
HttpMethod.PUT.name(),
HttpMethod.DELETE.name()
);
}
}
cors설정도 해봤는데 결과는 똑같았습니다. 뭐가 문제일까요 ㅠ
답변 1
0
안녕하세요! yuniyuni님! 🙂 우선 보내주신 코드로만 내용을 정확한 원인을 확인하기에도 어렵고, 이미지를 직접 컨트롤러에서 처리하는 경우는 강의와 관련이 적어서 직접적으로 문제를 해결해드리기 어려울 것 같아요 😢
다만 몇 가지 말씀을 드려보면...
만약 서버에서 직접 이미지를 내려주고 싶으시다면, 추가로 올려 놓은 영상인 <스프링 부트의 정적 파일 처리> 영상을 확인해보시기 바랍니다. 해당 기능을 적절히 이용하면, Controller 코드를 단 한 줄도 작성하지 않고 이미지를 서버에서 클라이언트로 전송할 수 있습니다.
만약 이미지 업로드 + 다운로드 기능을 고민하고 계시다면 보통은 S3와 같은 외부 이미지 저장소와 함께 구현하는 것이 일반적입니다. S3를 중심으로 구글에 검색해보시면 많은 자료가 나올 것 같아요!
감사합니다! 🙇
패키지 구분에 대해 궁금한게 있습니다
0
25
2
리액트 관련 질문이 있습니다.
0
65
2
스프링부트 버전
0
76
2
7강 강의를 들으려고 했는데 오류가 나서 서버가 안 켜지는거 같아요.
0
59
2
33강. UserLoanHistory의 관계성에 대한 질문
1
56
2
Java JDK 버전 문의의 건
0
135
2
ec2 에서 Linux버전이 달라져서 설치가 안되는것 같은데 자료 최신화좀 해주세요.
0
90
3
h2 console 접속했을 테이블 질문
1
67
1
ec2 서버에서 스프링 실행도 되고 인바운드 설정까지 했는데 index.html 안됨
0
79
2
15강. updateUser() 질문
0
56
2
깃허브 질
0
84
2
여기까지 다 끝냈다고 하셨는데
0
79
2
왜안될까요
0
72
2
MySQL 창이안ㄴ뜹니다
0
59
2
포스트맨
0
52
1
spring 개념적인 질문
0
71
2
인텔리제이 샘플코드 실행 안됨 오류
0
142
2
aws 배포할때 .env 파일에 저장한 환경변수에 관하여 여쭤볼게 있습니다
0
86
1
마이그레이션 오류입니다.
0
175
3
Whitelabel Error Page 오류가 났습니다.
0
166
2
안녕하십니까! 오류가 났습니다.. 도와주세요 ㅜㅜ
1
94
3
궁금한게 있습니다.
0
60
2
DTO 관련
0
70
2
궁금한게 있습니다!
0
69
2





