인프런 커뮤니티 질문&답변

리액트로 이미지를 조회하려는데 자꾸 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설정도 해봤는데 결과는 똑같았습니다. 뭐가 문제일까요 ㅠ