"CORS 오류: 왜 발생하고 어떻게 해결할까?"

1) CORS 오류란?

**CORS (Cross-Origin Resource Sharing)**는 웹 브라우저에서 발생하는 보안 정책으로, 동일한 도메인이 아닌 다른 도메인에서 리소스에 접근하는 것을 제한하는 보안 정책 중 하나입니다.

예를 들어 프론트 개발자가 백엔드 개발자에게 API 요청을 하는 경우가 있고 웹 브라우저는 기본적으로 CORS를 적용하여, 스크립트, 스타일시트, 이미지 등의 리소스가 동일한 도메인에서만 사용 가능하도록 제한합니다.

동일한 도메인의 리소스만 적용을 받을 수 있기 때문에 다른 도메인의 대한 리소스를 사용하려면 CORS 에러가 발생하게 됩니다.

 

출처 : 구글 이미지

⇒오류 예시 (ptsd..)

CORS 오류는 웹 애플리케이션에서 다른 도메인으로의 HTTP 요청을 할 때, 브라우저가 보안 정책에 따라 해당 요청을 차단하는 경우에 발생합니다.

보통 브라우저 개발자 도구 콘솔 화면에서 확인 가능합니다.

이 오류는 웹 애플리케이션이 다른 도메인으로의 요청을 보내고, 서버에서 해당 요청에 대한 "Access-Control-Allow-Origin" 이라는 헤더를 포함하지 않은 경우 발생할 수 있습니다. 이 헤더는 브라우저가 다른 도메인에서 리소스에 접근하는 것을 허용할지 여부를 설정하는데 사용되며, 서버에서 이 헤더에 요청자의 도메인 이나, 모든 도메인에 대한 설정을 해주지 않을 경우에 발생하게 됩니다.

 

 

2) 해결방법

CORS 오류를 해결하기 위해서는 다음과 같은 방법들이 있습니다.

서버에서 "Access-Control-Allow-Origin" 헤더에 다음의 도메인의 접근을 허용 하겠다 라는 내용을 적어줍시다.(헤더에 Access-Control-Allow-Origin https://www.naver.com) 이런 식으로 설정을 해준다면 해당 서버의 자원을 위의 도메인의 요청에 응답을 할 수 있게 해줍니다)

(보통 프로그래밍에서 처리하거나 .htaccess파일을 루트 경로와 동일경로에 추가하여 처리가 가능하고, 추가한 이후에는 반드시 서버를 재 시작 해야된다. 모른다면 삽질의 늪에 빠지게 될 것입니다..)

header('Access-Control-Allow-Origin: <https://www.naver.com> or 127.0.0.1');
header('Access-Control-Max-Age: 86400');
header('Access-Control-Allow-Headers: x-requested-with');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');

header추가 예) (php 7.4v)

또 는 서버에서 "Access-Control-Allow-Origin" 헤더를 "*"로 설정하여 모든 도메인에서 요청을 허용합니다. 다만, 이 방법은 openApi 같은곳에서만 사용하는게 좋고 보안상의 이유로는 지양하도록 합시다.

header('Access-Control-Allow-Origin: *');

또는 .htaccess 파일에

Header set Access-Control-Allow-Origin "<https://www.naver.com> or 127.0.0.1"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

이런 식으로 작성하고 서버 루트경로에 업로드 후 서버 재시작

요청을 보내는 클라이언트 측에서 CORS를 우회하는 방법인 "CORS Proxy"를 사용합니다.

이는 서버 측에서 CORS를 처리하는 대신 클라이언트에서 중간 프록시 서버를 통해 요청을 보내는 방식으로, 일부 상황에서 유용할 수 있습니다.

 

프록시 서버의 장점

1. 보안 향상: 프록시 서버는 클라이언트와 서버가 직접 통신을 하는게 아닌 중간다리 역할을 해주는 서버가 있기 때문에 클라이언트가 요청한 내용을 검증하고 서버로 요청을 하여 보안적으로 향상이 됩니다.
2. CORS 정책 우회: 웹 브라우저에서 발생하는 CORS 에러를 우회하여, 다른 도메인의 리소스를 요청할 수 있습니다. 이를 통해 다른 도메인의 API나 데이터에 접근이 가능해집니다.
3. 클라이언트 사이드 로직 분리: 프록시 서버를 사용하면, 클라이언트와 서버 간의 통신 로직을 서버 측에서 처리할 수 있습니다. 이는 클라이언트 측에서 복잡한 로직을 구현하지 않고도, 서버에서 데이터를 가공하거나 로그를 기록하는 등의 작업을 수행할 수 있는 장점이 있습니다.

악명 높은 CORS에러지만 CORS에 대해 잘 이해하고 보안정책에 맞게 request, response하는 개발자가 되도록 노력합시다.