CORS 학습배경

이제 코딩을 막 따라해보기 시작한 초보 코더입니다.
'A'서버의 DB 데이터를
'B'서버의 DB로 똑같이 옮겨야하는 문제를 해결하기위해
데이터를 select하여 ajax로 전송을 시도하였습니다.
콘솔 창에서 error를 확인했고 이것이 cors 정책과 관련있다는 것을 깨닫게 됬습니다.

CORS = Cross-Origin-Resource-Sharing

cors는 Cross-Origin-Resource-Sharing 약자로서 해석하자면

'교차 출처 자원 공유' 라는 뜻인데,

서로 다른 서버간에 이 '교차 출처 자원 공유'를 설정하지 않으면 error 가 발생하는 것이다.

즉 서로 다른 서버끼리 데이터를 보낼 일이 있다면 이 cors 설정을 해주면 된다.

이 CORS는 SOP 정책에 의하여 필요하게 되었다. SOP는 Same-Origin-Policy 정책으로 이것은

'어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다.

동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 가능한 공격 경로를 줄이는데 도움을 줍니다.' 라고 MDN에서 정의하였다.

두 URL의 프로토콜 ,포트, 호스트가 모두 같아야 동일한 출처라고 말한다.

여기서 중요한 것은 나중에 프로토콜이나 포트 호스트 중 하나라도 다르면 동일출처정책에 의해서 막힐 수도 있다는 것을 기억해놓는게 좋겠다는 생각이 든다.

HEADER

header는 클라이언트에서 서버로 요청에 대한 정보를 서버로 보낼 때 , 서버에서 응답할 때의 header가 있다.

즉, 요청 헤더와 응답 헤더가 있는데,

요청 헤더로는

1. Origin
2. Access-Control-Request-Method
3. Access-Control-Request-Headers

응답 헤더로는

1. Access-Control-Allow-Origin
2. Access-Control-Allow-Credentials
3. Access-Control-Expose-Headers
4. Access-Control-Max-Age
5. Access-Control-Allow-Methods
6. Access-Control-Allow-Headers

가 있다.

CORS 요청을 수신하는 서버는 요청을 처리하며, 요청된 컨텐츠와 함께 일련의 CORS 응답 헤더를 다시 브라우저로 전송할 수 있다.

이러한 CORS 응답 헤더는 현재 웹 페이지가 해당 리소스에 액세스하도록 허용되는지 여부, 전송된 헤더가 해당 요청에 대해 허용되는

지 여부 등을 지정하는 값을 포함한다.

브라우저가 CORS 응답 헤더에 의해 충족된 CORS 요청을 파악할 수 없으면 자동으로 컨텐츠에 대한 액세스 및 컨텐츠 로드를 금지한

다.

그렇지 않으면 CORS 원본이 리소스를 사용할 수 있는 지정된 권한이 있는지 파악하고 요청된 컨텐츠에 대한 액세스 및 컨텐츠 로

드를 허용한다.

설정

여러가지 상황에 따라서 설정이 달라질거라 예상하지만 나의 경우 간단한 데이터 보내기였기 때문에 이 때 설정 header는 간단했다.

(하지만 다 써놓고보니 그랬던 것일 뿐 CORS 자체를 몰랐으니 정말 해맸다 ;)

나의 업무가 PHP서버를 유지 보수 하는 일이었기 때문에 PHP에서 HEADER를 설정했다.

위 이미지에서 알 수 있듯이

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

에스타르크 * 는 모든 origin을 의미하고 특정 url에서의 요청만을 허용하겠다하면 *(에스타르크) 부분에 특정 url을 적어주면 된다.

header('Access-Control-Allow-Headers: )

여기서는 지정한 header에 대해서 응답할 수 있게 해주는 처리부분이다.

header('Access-Control-Allow-Method': GET,POST,OPTION)

error

서버에서 타 호스트/포트에 대한 origin의 설정이 없을 경우에 이러한 error를 반환한다.