로컬 개발 환경에서 CORS 에러 해결하기

문제 상황

서버이전 후, React로 개발 중인 프로젝트의 로컬 개발 환경에서 테스트를 하면 API호출이 되지 않는 문제가 발생했습니다.
CORS(Cross-Origin Resource Sharing) 에러이고 서버측에서 CORS 설정을 해줘야 한다는데..
난 서버에 손대고 싶지않고.. 간단한 변경 사항만 확인하고 싶었기 때문에 임시방편을 찾게되었습니다.

에러메시지 :

Access to fetch at 'https://www.example.com/api/' from origin 'http://localhost:3000' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, 
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

CORS란?

CORS는 웹 브라우저에서 보안상의 이유로 동일 출처(Same Origin) 정책을 적용하여, 다른 출처의 리소스에 접근하는 것을 제한하는 보안 메커니즘입니다. 로컬 개발 환경(localhost:3000)에서 실제 운영 서버의 API를 호출할 때 이 문제가 자주 발생합니다.

해결 방법

임시 해결책: Chrome 브라우저의 보안 설정 비활성화

개발 단계에서 빠른 테스트를 위해 Chrome 브라우저의 웹 보안을 비활성화하는 방법을 사용했습니다.

Windows 사용자의 경우:

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

Mac 사용자의 경우:

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

이 명령어로 실행된 Chrome 브라우저에서는 CORS 정책이 비활성화되어 로컬 개발 환경에서도 API 호출이 가능해집니다.

주의사항

이 방법은 개발 환경에서만 사용해야 하는 임시 해결책입니다. 실제 운영 환경에서는 다음과 같은 올바른 CORS 설정이 필요합니다:

1. 서버 측 CORS 설정
2. 프록시 설정
3. 환경 변수를 통한 API 엔드포인트 관리

정석적인 해결 방법

실제 운영 환경에서는 서버에 적절한 CORS 설정을 추가하는 것이 바람직합니다:

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("http://localhost:3000")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedHeaders("*");
    }
}

결론

개발 과정에서 CORS 문제를 마주쳤을 때, Chrome 브라우저의 보안 설정을 비활성화하는 방법으로 빠르게 문제를 해결할 수 있었습니다. 하지만 이는 어디까지나 개발 환경에서의 임시 방편일 뿐, 실제 운영 환경에서는 적절한 CORS 설정을 통해 보안을 유지하면서 필요한 리소스에 접근할 수 있도록 해야 합니다.

또한 이 방법은 보안 설정을 비활성화한다는 점을 항상 유의해야 하고, 공부중에 찾은 방법이라 잘못된 부분이 있을 수 있습니다.