inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]

이미지 조회 404

141

dev

작성한 질문수 9

0

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

 

java spring aws mysql spring-boot jpa

답변 1

0

최태현

안녕하세요! yuniyuni님! 🙂 우선 보내주신 코드로만 내용을 정확한 원인을 확인하기에도 어렵고, 이미지를 직접 컨트롤러에서 처리하는 경우는 강의와 관련이 적어서 직접적으로 문제를 해결해드리기 어려울 것 같아요 😢

 

다만 몇 가지 말씀을 드려보면...

  1. 만약 서버에서 직접 이미지를 내려주고 싶으시다면, 추가로 올려 놓은 영상인 <스프링 부트의 정적 파일 처리> 영상을 확인해보시기 바랍니다. 해당 기능을 적절히 이용하면, Controller 코드를 단 한 줄도 작성하지 않고 이미지를 서버에서 클라이언트로 전송할 수 있습니다.

  2. 만약 이미지 업로드 + 다운로드 기능을 고민하고 계시다면 보통은 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