[TIL] 37일차

소셜 로그인을 제외하고 백엔드에서 맡은 API는 모두 구현하고, CORS 설정까지 마친 후 배포했다.

오늘의 관건은 엑셀파일에 저장한 데이터를 MySql로 코드를 통해 저장하는 것과 CORS 연결이었다.

 

1. 엑셀 MySql RDB에 저장

코드로 xslx 파일을 열어 첫번째 시트의 각 행에 대해 for문으로 돌면서 각 열의 데이터를 추출해 미리 만들어논 엔티티에 넣고, 그 엔티티들을 리스트에 넣어 최종적으로 saveAll을 통해 저장했다

https://shinsunyoung.tistory.com/71

SpringBoot의 POI을 이용해서 엑셀 파일 읽기

엔티티가 잘 구성되는것도 확인이 되는데, 문제는 MySql RDB에 계속 들어가지 않으면서 SQL syntax error가 뜨는 것이다.

H2에는 잘 들어가는 것이 확인이 되어서 포기하고 MySql Workbench를 통해서 직접 CSV파일을 import하는 것도 시도했지만 실패했다...

구글링을 해서 나온것은 MySql 예약어랑 엔티티에 있는 필드명이랑 같으면 생길 수 있는 에러라는 것 정도였는데, 블로그에 첨부된 MySql 예약어 중 겹치는 것이 없는 것이다. 그래도 에러 메세지 확인하면서 그냥 rank를 ranking으로 바꿔서 시도했는데 바로 성공...!

정말 어이없으면서 속 시원한 순간이었다 ㅋㅋㅋㅋ

 

2. CORS 설정

이 설정 방법은 여러가지가 있는 것 같다.

컨트롤러마다 어노테이션을 붙히거나, 필터를 만들거나, config 클래스를 만들거나 이 세가지 정도로 조사되었다.

그 중 우리 프로젝트의 상황에 맞게 config 클래스를 활용하여 프론트의 localhost:3000 요청을 허용하는 설정을 해주었다.

@EnableWebMvc
@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
   
    @Override
    public void addCorsMappings(final CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowedOrigins("http://localhost:3000")
                .exposedHeaders("*");
                //.allowCredentials(true); // JWT 사용하기 때문에 불필요
    }
}

• @Configuration은 당연하고, @EnableWebMvc를 붙혀주어야 잘 작동한다고 한다

// WebSecurityConfig class
@Override
protected void configure(HttpSecurity http) throws Exception {
    http.mvcMatchers(HttpMethod.OPTIONS, "/**").permitAll() // 추가

• 해당 사항을 추가해 OPTIONS 메서드로 오는 프리플라이트 요청을 받을 수 있는 것 같다

3. CORS 확인

다른 조원 분의 도움으로 git bash에서 CORS 설정된 것이 잘 돌아가는지 확인할 수 있는 코드를 받았었다

curl \
--verbose \
--request OPTIONS \
'http://3.39.231.71/api/movie' \
--header 'Origin: http://localhost:3000' \
--header 'Access-Control-Request-Headers: Origin, Accept, Content-Type' \
--header 'Access-Control-Request-Method: GET'

• Origin과 서버 주소, Access-Control-Request-Method를 잘 설정하면 아래와 같이 200 응답을 보내주고

Connected to 3.39.231.71 (3.39.231.71) port 80 (#0)
> OPTIONS /api/movie HTTP/1.1
> Host: 3.39.231.71
> User-Agent: curl/7.78.0
> Accept: */*
> Origin: http://localhost:3000
> Access-Control-Request-Headers: Origin, Accept, Content-Type
> Access-Control-Request-Method: GET
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200
< Vary: Origin
< Vary: Access-Control-Request-Method
< Vary: Access-Control-Request-Headers
< Access-Control-Allow-Origin: http://localhost:3000
< Access-Control-Allow-Methods: GET
< Access-Control-Allow-Headers: Origin, Accept, Content-Type
< Access-Control-Expose-Headers: *
< Access-Control-Max-Age: 1800
< X-Content-Type-Options: nosniff
< X-XSS-Protection: 1; mode=block
< Cache-Control: no-cache, no-store, max-age=0, must-revalidate
< Pragma: no-cache
< Expires: 0
< X-Frame-Options: DENY
< Content-Length: 0
< Date: Wed, 07 Sep 2022 04:47:52 GMT

• 예를 들어 Origin을 내가 한 CORS 설정과 다르게 한다면 아래와 같이 403 응답을 보내준다

Connected to 3.39.231.71 (3.39.231.71) port 80 (#0)
> OPTIONS /api/movie HTTP/1.1
> Host: 3.39.231.71
> User-Agent: curl/7.78.0
> Accept: */*
> Origin: http://localhost:3001
> Access-Control-Request-Headers: Origin, Accept, Content-Type
> Access-Control-Request-Method: GET
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 403
< Vary: Origin
< Vary: Access-Control-Request-Method
< Vary: Access-Control-Request-Headers
< X-Content-Type-Options: nosniff
< X-XSS-Protection: 1; mode=block
< Cache-Control: no-cache, no-store, max-age=0, must-revalidate
< Pragma: no-cache
< Expires: 0
< X-Frame-Options: DENY
< Transfer-Encoding: chunked
< Date: Wed, 07 Sep 2022 04:51:42 GMT