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);
})
}
이렇게 통신을 하면 서버에서 이미지를 반환해주는데 반환 된 이미지는 스테이트에 담아서 보여주려고 하고 있습니다.
@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);
}
이게 이미지를 반환해주는 서버 측 코드입니다.
포스트맨으로 똑같은 조건으로 요청을 하면 상태코드 200에 이미지도 잘 반환해 주는데
리액트로 요청을 하면 404 Not Found를 반환하네요. 서버에서는 리액트와 통신하기위해 cors설정도 해놨는데 어떤게 문제가
되는지 모르겠습니다.
