Dev-Environment

210605 CORS 문제해결

CORS

CORS(Cross-Origin Resource Sharing) ?

브라우저상에서 정보를 받는 곳과 보내는 곳이 신뢰할 수 있는 곳인지 확인하는 절차가 필요하다.
발신자와 수신자를 신뢰할 때 정보의 신뢰성과 보안이 보장될 수 있기 때문이다.

CORS issue는 브라우저와 서버 간의 요청에서만 발생되며, 서버와 서버간에는 발생하지 않는다.
요청을 보내는 쪽과 받는 쪽의 도메인이 서로 다른 경우, browser가 해당 요청을 차단한다.

동일 출처 정책(same origin policy)

하나의 근원지로부터 문서 또는 스크립트를 로드함으로써 다른 근원지로부터 오는 잠재적인 악성 문서를 격리하는 정책이다.

CORS 해결방법

직접적으로 사용자들의 browser를 변조해서 CORS 문제를 해결할 수 없기 때문에 아래의 두 가지 방법으로 CORS 문제를 해결할 수 있다.

  • 해결방법1: Proxy 방식

    예를들어 브라우저에서 다른 도메인인 백엔드 서버로 요청을 보내는 것은 문제가 되기 때문에 브라우저와 같은 도메인인 프론트엔드 서버를 거쳐서 백엔드 서버로의 요청과 응답을 처리하는 방법이다.

  • 해결방법2: Access-Control-Allow-Origin header 허용

    header의 Access-Control-Allow-Origin의 통해 요청이 오는 특정 도메인을 허용할 수 있다.

    예를들어 Express server에서 router의 callback 함수에서 response를 통해 header의 Access-Control-Allow-Origin 속성을 통해 특정 도메인을 허용해주거나, cors middleware를 사용해서 해결할 수 있다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    res.setHeader('Access-Control-Allow-Origin', '*');

    // cors middleware
    app.use(
      cors({
        // 요청을 보낸 도메인이 자동으로 허용된다.
        origin: true,
        credentials: false
      })
    );