오늘 한 일

협업 과제 진행

상세

베이스코드 작성(엔티티간 연관관계 적용 까지)
이미지파일 수신 테스트

• CORS 에러 해결
• 이미지파일 용량 제한 에러 해결

결과

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
@Slf4j(topic = "CORS Filter")
public class CorsFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        log.info(request.getHeader("Origin"));

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods","*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, Authorization");

        if("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        }else {
            chain.doFilter(req, res);
        }
    }

    @Override
    public void destroy() {

    }
}

@RestController
@RequestMapping("/api")
@Slf4j(topic = "logging")
@CrossOrigin(origins = "http://localhost:3000")
public class ImageController {

    @PostMapping("/image1")
    public ResponseEntity<?> imageTest1(@RequestParam("images") List<String> imageBase65CodeList) {
        return ResponseEntity.status(HttpStatus.OK).body(imageBase65CodeList);
    }

    @PostMapping("/image2")
    public ResponseEntity<?> imageTest2(@RequestBody TestEntity testEntity) throws IOException {
        log.info("인코딩된 이미지 코드: " + testEntity.getFileBase64Code());
        byte[] targetBytes = testEntity.getFileBase64Code().getBytes();
        Decoder decoder = Base64.getDecoder();
        String str = new String(decoder.decode(targetBytes));
        log.info("디코딩된 이미지 코드: " + str);
        Map<String, String> map = new LinkedHashMap<>();
        map.put("msg", "성공");
        map.put("인코딩된 이미지 코드", testEntity.getFileBase64Code());
        map.put("디코딩된 이미지 코드", str);
        return ResponseEntity.status(HttpStatus.OK).body(map);
    }

    @PostMapping(value = "/image3")
    public ResponseEntity<?> imageTest3(@RequestParam("images") List<MultipartFile> file) throws IOException {
        log.info("멀티파트 파일: " + file);
        List<String> fileNames = new ArrayList<>();

        for (MultipartFile multipartFile : file) {
            if (fileNames.size() > 10) {
                throw new FileCountLimitExceededException("max", 10);
            }
            log.info("ContentType: " + multipartFile.getOriginalFilename());
            fileNames.add(multipartFile.getOriginalFilename());
        }

        return ResponseEntity.status(HttpStatus.OK).body(fileNames);
    }
}

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=30MB

SOP를 지키기위해 커스텀 필터로 헤더에 Access-Control-Allow 정보를 넣었다.
ec2를 이용해 배포하여 프론트분에게 테스트를 할 수 있는 환경을 제공했다.
nohup.out안에 있는 실행창에 뜨는 로그를 읽어 에러 메세지를 확인하고 수정작업하여 cors에러와 이미지 용량 제한 에러를 해결하였다

생각

오늘은 조금 오래 걸릴줄 알았던 이미지 파일 송수신에 관한 문제를 해결하였다. WIL주제가 CORS길래 "저게 뭔데" 라고했었는데 오늘 내가 해결해야할 부분이었다.

어찌저찌 구글링으로 테스트 환경에서 해결만 해놓은 상태라 본코드에 적용할 때는 또 어떻게 될지 모르겠다. 그래도 답은 있겠지. ㅎㅇㅌ이다