NodeJS, Svelte - CORS 해결 3가지 방법

필자도 CORS를 알고 있지만, 이번에는 프론트쪽 언어를 진행하면서 CORS를 다시금 경험하여 해결 방안을 Nodejs, Svelte 입장에서 정리해본다.

CORS는 가장 요점만 정리한다면,

현재 도메인 이외의 경로에서 정보를 요청했을때, 사전에 요청을 현재 도메인이 허용하는지를 구성하도록 하여 해커의 공격을 막기 위한 브라우저의 보안 설정이라고 할 수 있다.

이를 해결하기 위해서는 

1. 쿠키 정보를 공유하거나

2. Access-Control-Allow-Origin를 설정하거나

3. Proxy 설정을 하는 것이다.

 

각 방법에 대해서 간략히 정리해 본다.

 

1. 인증된 요청 (Credentialed Request) 통한 방법

인증된 요청 (Credentialed Request)은 인증 정보들 전달한다는 의미로, 현재 도메인의 허용된 요청임을 증명하는 방식이다. 하지만 많이 사용되지 않는 이유는 인증 정보에는 쿠키, 세션 정보등 많은 정보를 담고 있다. 즉 현재 도메인과 요청하는 도메인간 완전한 정보를 공유하기 때문에 만약 외부 사이트에 이렇게 구성하기에는 사용자의 중요한 정보가 노출될 수 있기 때문에 사용시 주의해야 한다.

Nodejs 기준으로 자주 사용되는 fetch와 axios는 다음과 같이 구성이 가능하다.

// fetch

const res = await fetch("https://checkip.amazonaws.com",{credentials: "include"})

// axios

axios.get('https://checkip.amazonaws.com', { withCredentials: true})

사용할 수 있는 옵션은 다음과 같다.

옵션 값

• same-origin(Default)

동일한 도메인간의  요청에만 인증 정보를 전달함

• include

요청에 인증 정보를 전달

• omit

요청에 인증 정보를 전달하지 않음

2.  Access-Control-Allow-Origin 구성

요청 받는 서버에서 Access-Control-Allow-Origin 설정을 해주는 것이 가장 효율적이다.

다만 Nodejs, Svelte등 프론트 서버로 구성된 환경에서는 실행이 클라이언트에서 진행되기 때문에 이를 구성하기 어렵다.

여기에서 얘기하는 방식은필자는 Nodejs, Svelte -> Backend 서버등 서버에 정보를 요청하는데 이 Backend 서버에서 구성하는 것을 의미한다.

대부분의 웹 서버들은 Access-Control-Allow-Origin 를 구성할 수 있도록 지원하고 있다.

여기에서는 Nginx에서 구성하는 방안을 정리해 본다. 그외 Nodejs는 자체 서버를 구성했을 경우 활용할 수 있다.

Nginx

add_header 'Access-Control-Allow-Origin' '*' always; 옵션을 추가해 주면 된다.
    location / {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, DELETE, PATCH, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
            add_header 'Access-Control-Max-Age' 86400;
            return 204;
        }
        add_header 'Access-Control-Allow-Origin' '*' always;     
    }

3. Web Proxy 서비스를 이용

Proxy 서버는 Access-Control-Allow-Origin를 기본적으로 허용하기 때문에 사용할 수 있다.

다만 Proxy 서비스를 구성한다면, Nodejs, Svelte 기준으로 클라이언트인 일반 사용자들에게도 오픈이 되기 때문에 남용될 수 있는 단점이 존재하고, 제공되는 무료 Proxy 서비스를 이용한다면, 요청 횟수가 제한이 있어서 실제 서비스에서 활용하는데는 한계가 있다.

무료로 사용할 만한 Proxy 사이트는 다음과 같다.

https://cors-anywhere.herokuapp.com/

https://cors-proxy.org

https://proxy.cors.sh

https://cors-proxy.htmldriven.com/

http://thingproxy.freeboard.io

 

사용 방법은 해당 사이트에 방문하면 자세히 알 수 있으며,  2가지 정도로

1. URL에 붙여서 사용하거나,

2. 헤더를 추가해서 사용하는 방식으로 구분된다.

 

1. URL에 함께 이용

req_url = 'https://asecurity.dev'

const res = await fetch(`https://thingproxy.freeboard.io/fetch/{req_url}`)

2. 별도의 헤더 이용

req_url = 'https://asecurity.dev'

const res = await fetch('https://cors-proxy.org/api/', {headers: {'cors-proxy-url': ${req_url}}})

 

마치며,

필자가 추천하는 방법은 2번, Access-Control-Allow-Origin를 추가하는 것이다.

그리고 외부 제공을 목적으로 하는 서비스라면, 대부분 Access-Control-Allow-Origin를 구성하기 때문에, 만약 CORS오류가 발생한다면, 다른 비슷한 기능을 제공하는 사이트를 확인해보기를 추천한다.