[졸프]CORS 에러 (403) 트러블슈팅 과정

안녕하세요. 평소에 잘 되던 서버가 CORS 오류로 안되어서 하루종일 오류 고치고 있는 사람임다

어떤 오류가 났냐면

  url A from origin url B has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

이런 말이 나와요.. 덕분에 CORS 공부 중입니다. 현재 전체적으로 403에러가 나고, DB에 있는 정보가 나오지 않고 해당 웹에서 프엔분이 만들어놓은 웹 디자인 말고는 보이지 않는 현상 발생!!
하지만 DB 서버를 켜놓은 상태이고, 반환되는 형태는 맞음. 결국 CORS 에러가 확실하다는 것

이 에러는 굉장히 흔한 에러로 CORS는 항상 개발자들이 한번쯤은 얻어맞는 구간이라고 함..

우선 내 코드 중에 CORS와 관련된 내 코드는 SecurityConfig.java라는 파일이므로 이 부분을 집중적으로 봄

여러 구글링을 하던 중
https://cheershennah.tistory.com/229
이 블로그가 내 코드랑 매우 비슷해서 코드를 고쳐봤슴. CorsPreflightAllowFilter.java라는 파일을 추가했음

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsPreflightAllowFilter implements Filter {

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

        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        String origin = request.getHeader("Origin");
        if (origin != null && !origin.isEmpty()) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }

        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Max-Age", "3600");

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

}

고친 코드다. 과연 될까? (기대 안한다)
역시 안된다. 그냥 페이지가 오류로 빨갛다. 다른 에러가 발생하지 않은 상태로 여전히 그대로다.

지금 현재 개발자 모드로 보았을 때, 오류이다.

포스트맨으로 진행했을 때는 정상 200 OK가 나온다. 하지만 포스트맨에선느 CORS 관계없이 실행되므로 이 부분은 CORS에러라는 게 거의 확실해졌다.

curl로 직접 테스트를 해보았더니 여전히 403 오류가 난다.

ubuntu@ip-172-31-10-67:~$ curl -i -X OPTIONS "http://3.107.175.151:8080/api/search?mode=full&type=QUESTION" \
  -H "Origin: http://3.107.175.151:3000" \
  -H "Access-Control-Request-Method: GET"
HTTP/1.1 403 
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-XSS-Protection: 0
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Transfer-Encoding: chunked
Date: Thu, 03 Jul 2025 13:25:45 GMT

-> 서버가 OPTIONS 프리플라이트 요청 자체를 거부하고 있다.왜냐면 오류가 나는 URL에는 모두 permitAll() 처리를 해놨기 때문이다.

.requestMatchers(HttpMethod.OPTIONS, "/**").permitAll()

내 SecurityConfig에는 해당 코드가 있어서 OPTIONS 모든 경로 허용이니까 사실 403이 안 나야함.

curl -i -X GET "http://localhost:8080/api/search?mode=full&type=QUESTION"=full&type=QUESTION"

지금 이 코드는 정상 작동됨

하지만 별에 별 수정과 파일을 추가해봐도 안된다는 것을 한 2일만에 깨닫았음.
그래서 서버 실행하는 git을 다시 돌아보기로 결정..

현재 내 백엔 깃허브에서는 main에서만 수정 과정을 거치고 있었지만 지금 불안정한 개발과정에서 main으로만 개발한다는 것은 리스크가 있다고 판단. 그래서 새로운 dev 브랜치를 팠고 그 부분에 다시 처음부터 SecurityConfig.java를 수정했다. 그리고 ./gradlew clean build 명령어를 통해서 다시 빌드 후 실행

그리고 현재 프엔에서도 dev브랜치를 사용하고 있다. EC2 서버 내에서 dev 브랜치에 HEAD 되어있는지 확인하고 다시 pull 하고 진행했다

아마 깃에서 꼬인듯한 느낌이 들어서 전체적으로 정리 후 실행했더니 됐다...!!
깃을 한번 다시 보면 좋았을텐데 그저 CORS 관련된 코드 문제일거라고 생각해서 코드만 계속 고쳤다.

담부터 해당 오류가 난다면 git을 다시 돌아보기로! 그리고 내가 깃 명령어를 생각없이 쓰는 게 있는 것 같아서 다시 공부하는 계기가 되었다. 그리고 CORS와 SOP에 대해서 공부하는 계기가 되어서 좋았다...^^