🦉 뀨업 - 이화 백준 사이트 리팩토링 ( 5 ) - CORS, 쿠키랑 싸우기

 

 

 

오늘 뀨업 팀원들랑 만나서 로그인 및 문제 리프레시 로직 확인했는데

CORS 에러가 났다...

 

그래숴 WebConfig 클래스를 만들어서 CORS 설정을 했는데

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("http://localhost:3000")   // 테스트 후 프론트 URL로 변경 예정
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true);
    }
}

 

 

와일드카드 머시기 에러가 났다...

허용하는 도메인에 와일드 카드(*)를 사용하지 말라는 뜻인 듯

으아... 근데 분명 WebConfig에서 도메인 설정할 때 와일드 카드(*) 사용 안 했는데...

(킹받)

근데 은채 컴에서 내가 Response 던진 거 보니께

헤더에 Access-Control-Allow-Origin가 *(와일드카드)로 되어 있었다...

(킹받)

 

 

GPT쒜한테 물어보니까 WebConfig 파일이 제대로 적용 안 될 수도 있다며

Filter단에서 해결해보라길뤠

Filter 상속받아서 요로코롬 CORS 설정 파일 다시 만들어줬다

@Component
public class CorsFilter implements Filter {

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

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {

        HttpServletResponse httpResponse = (HttpServletResponse) response;

        // Access-Control-Allow-Origin 헤더 추가
        httpResponse.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");

        // Access-Control-Allow-Credentials 헤더 추가
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");

        // 필요한 메서드 허용 (GET, POST 등)
        httpResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");

        // 요청 헤더 허용
        httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");

        chain.doFilter(request, response);  // 요청을 계속 처리
    }

    @Override
    public void destroy() {
    }
}

 

 

오옹오오오오오옹

로그인까지 성공해따아아ㅏ아아아(쿠키에 핸들 저장 완료)

 

 

그런뒈.... 문제 리프레시가 안 된다...

우리 로직이

리프레시 버튼 클릭 > 쿠키 확인
>> 쿠키 있으면 : GET /problems/refresh로 요청
>> 쿠키 없으면 : POST /members/login?handle={백준핸들}로 요청 보내서 사용자로부터 핸들 입력 받은 뒤 쿠키에다가 저장 > GET /problems/refresh로 요청

인데

아무래도 브라우저에 저장된 쿠키가 서버단으로 안 넘어오는 것 같았다

 

 

열씨미 찾아보니...

쿠키에는 sameSite 설정이란 것이 있는데

이번에 크롬의 보안규칙이 빡빡해지면숴

서로 다른 도메인간(프론트/서버 도메인이 서로 다른 상황이므로) 쿠키 통신을 하려면 sameSite를 None으로 설정해줘야 하는데

문제는 이때 도메인이 HTTPS여야 한다는 것이어따...

ㅎㅎㅎㅎㅎㅎㅎ

 

 

 

결론....

CORS, Cookie와의 싸움에서 장렬히 패배...

다음주를 기약....

홀리몰리....

 

 

---

 

 

HTTPS 백엔드쪽에서는 성공, 프론트단에서는 아직 싸우는 주웅... 파이팅팅팅티이잉

 

HTTPS 설정 방법 참고 블로그

https://jindevelopetravel0919.tistory.com/192

[AWS] EC2 HTTPS 및 로드밸런서 적용

1.  클라이언트에서 서버로 Request 보내기
2.  해당 요청을 로드밸런서가 HTTPS 요청인지 일반적인 HTTP 요청인지 판단
3.  HTTP 요청일 경우 : 이 요청을 HTTPS 요청으로 리다이렉션 / HTTPS 요청일 경우 : Target Group 의 80번 port(HTTP)로 요청을 포워딩