CORS(Cross-origin Resource Sharing)의 구현

전편에 이어 CORS에 대해 조금 더 알아보고자 한다.

CORS 구현하는 방법

먼저, 클라이언트 측에서는 특별히 할 게 없다. 별도의 오리진으로의 요청은 아래와 같이 'Origin' 이라는 필드를 추가하면 된다.

Origin: https://xxx.co.kr

Fetch API에서는 'cors mode'을 설정할 필요가 있다.

fetch('https://xxx.co.kr', {
  mode: 'cors'
});

다음, 서버 측에서는 응답 헤더를 아래와 같이 추가할 필요가 있다.

Access-Control-Allow-Origin: https://xxx.co.kr  // 특정 사이트를 허가
Access-Control-Allow-Origin: *   // 모든 사이트를 허가
Access-Control-Allow-Headers "X-Requested-With, Origin, X-Csrftoken, Content-Type, Accept"  // 여기는 사용하는 프레임워크에 따라 달라진다.

Cookie도 허가 하기

예를 들어 testA.com 이라는 페이지를 연 상태로 testB.com으로 XMLHttpRequest를 보낼 때, testB.com의 Cookie도 포함해서 요청을 보내고 싶은 경우에는 기본적으로는 서로 다른 오리진에는 Cookie를 포함해서 보낼 수 없다.

이 경우에는 클라이언트 측과 서버 측 각각 이를 구현하기 위해 아래와 같은 설정이 필요하다.

클라이언트 측

1. XHR을 사용하는 경우

const xhr = new XMLHttpRequest();
xhr.withCredentials = true; // 여기를 추가

2. Fetch API를 사용하는 경우

fetch('https://trusted-api.co.jp', {
  mode: 'cors',
  credentials: 'include' // 여기를 추가
});

3. axios를 사용하는 경우

axios.get('https://trusted-api.co.jp', { 
  withCredentials: true
});

axios.defaults.withCredentials = true; // 글로벌에 설정한 경우

참고 자료

• https://developer.mozilla.org/ko/docs/Web/HTTP/CORS