CORS 에러와 해결방법 (RestApi DELETE)

 
CORS 코드 해결법 1탄 보러가기 
https://skylarcoding.tistory.com/128

Network Error (CORS error) 해결방법

 
 
CORS 를 다루며 혼자 깨달은건, 보안적인 부분을 위해 해당 spring 프로젝트를 어디서 사용할 지 설정해주는 것이라고 생각하면 될 것 같다.
 

디버깅 추가

우선 application.properties 에 디버깅을 위한 도구를 추가하자.

# CORS 에러 디버깅
logging.level.org.springframework.web=DEBUG

 
 

에러

1. failed to parse configuration class 
- config 파일이 있는 줄 까먹고 하나 더 만들어서 발생한 문제.

 
2. Invalid CORS request
- 전체 읽으면 해결 법 나옵니다.
 
3. 
 
 
 

원인

그러면 아래와 같이 상세한 디버깅 내역을 확인할 수 있다.
나의 경우에 아래와 같은 에러가 발생했는데, 내용을 찬찬히 보면 chrome-extension 부분이 허용되지 않은 것을 알 수 있다.

2024-11-08T22:57:48.718+09:00 DEBUG 52870 --- [nio-8080-exec-2] o.s.web.servlet.DispatcherServlet        : DELETE "/penaltylog/2411020001/sylee", parameters={}
2024-11-08T22:57:48.745+09:00 DEBUG 52870 --- [nio-8080-exec-2] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to com.example.studyproject.penaltylog.PenaltylogController#deletePenaltyLog(String, String)
2024-11-08T22:57:48.793+09:00 DEBUG 52870 --- [nio-8080-exec-2] o.s.web.cors.DefaultCorsProcessor        : Reject: 'chrome-extension://coohjcphdfgbiolnekdpbcijmhambjff' origin is not allowed
2024-11-08T22:57:48.820+09:00 DEBUG 52870 --- [nio-8080-exec-2] o.s.web.servlet.DispatcherServlet        : Completed 403 FORBIDDEN

 
개발자 도구에서 바라보면 이렇다.

 
처음에 webConfig 파일에 chrome-extension (크롬 확장프로그램/ postman) 을 안 넣어줘서 발생한 에러이다.
 
 

DELETE 만 에러가 발생하는 이유

그런데 이해가 안가는건... 이걸 안 넣어줘도 insert, update 는 잘만 되었다는 거다.
delete 는 보법이 다른가 ..
 
-> 찾아보니 보법이 다른게 맞다.
DELETE 요청은 브라우저가 사전 요청(preflight request)을 보내는 경우가 많습니다. 사전 요청은 OPTIONS 메서드를 사용하여 실제 요청을 보내기 전에 서버가 해당 요청을 허용하는지 확인하는 과정입니다.
INSERT와 UPDATE 요청은 POST 메서드를 사용하므로, 사전 요청이 발생하지 않거나, 다른 방식으로 처리되었을 가능성이 있습니다.
 
그렇다고 한다.
아래 파일처럼 작성해주었다.
 

경로

경로는 com.exmaple.studyproject.util 밑에서 관리하고 있다.
config 디렉토리를 만들거나, 전체적으로 프로젝트 설정 관리하는 곳에 넣어주면 될 것 같다.
 

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080", "http://localhost:3000","chrome-extension://coohjcphdfgbiolnekdpbcijmhambjff")
                // 백엔드, 프론트엔드, 크롬 확장프로그램
                // .allowedOrigins("*") 도 가능
                .allowedMethods("GET","POST","DELETE")
                .allowCredentials(true)
                .maxAge(3000);

    }
}

 
 

 
 
코드를 수정하니 정상 동작하는 것이 보인다.
 
 
 

 
 
감사합니다