CORS와 인증 토큰 처리: 네트워크 지식과 실무 적용

인증과 네트워크의 중요성

웹 개발에서 인증과 네트워크는 필수적인 요소입니다. 특히, CORS(Cross-Origin Resource Sharing)와 인증 토큰의 처리는 개발자들이 반드시 이해해야 할 중요한 주제입니다.

왜냐하면, 네트워크 에러가 발생했을 때 원인을 파악하고 해결하기 위해서는 기본적인 네트워크 지식이 필요하기 때문입니다.

이번 글에서는 CORS의 기본 개념과 프리플라이트 요청, 그리고 인증 토큰 처리와 관련된 실무적인 내용을 다룹니다.

이를 통해 개발자들이 네트워크와 인증 관련 문제를 효과적으로 해결할 수 있는 방법을 제시합니다.

또한, 관련된 코드 예제를 통해 실무에서 바로 적용할 수 있는 팁도 제공합니다.

CORS와 프리플라이트 요청

CORS는 브라우저가 다른 출처의 리소스를 요청할 때 발생하는 보안 정책입니다. 기본적으로 브라우저는 동일 출처 정책(Same-Origin Policy)을 따르며, 이를 위반하는 요청은 차단됩니다.

왜냐하면, 동일 출처 정책은 보안을 강화하기 위해 설계된 정책이기 때문입니다.

프리플라이트 요청은 본 요청 전에 OPTIONS 메소드를 사용하여 서버가 요청을 허용하는지 확인하는 과정입니다. 이 과정에서 서버는 Access-Control-Allow-Origin 헤더를 통해 허용된 도메인을 명시해야 합니다.

예를 들어, 다음과 같은 서버 설정이 필요합니다:

    app.use((req, res, next) => {
        res.header("Access-Control-Allow-Origin", "http://example.com");
        res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        next();
    });

이 설정을 통해 브라우저는 요청이 허용되었는지 확인하고 본 요청을 진행할 수 있습니다.

인증 토큰과 CORS

인증 토큰은 사용자 인증을 위해 사용되며, 일반적으로 Access Token과 Refresh Token으로 구성됩니다. Access Token은 짧은 유효기간을 가지며, Refresh Token은 더 긴 유효기간을 가집니다.

왜냐하면, Access Token은 보안성을 높이기 위해 짧은 시간 동안만 유효하도록 설계되었기 때문입니다.

Access Token이 만료되었을 때, Refresh Token을 사용하여 새로운 Access Token을 발급받는 과정이 필요합니다. 이 과정에서 CORS 설정이 올바르게 되어 있지 않으면 요청이 차단될 수 있습니다.

다음은 Refresh Token을 사용하여 Access Token을 갱신하는 예제입니다:

    async function refreshAccessToken(refreshToken) {
        const response = await axios.post('/auth/refresh', { token: refreshToken });
        return response.data.accessToken;
    }

이 코드는 Refresh Token을 서버로 보내 새로운 Access Token을 발급받는 과정을 보여줍니다.

쿠키와 로컬 스토리지

인증 토큰을 저장하는 방법으로는 쿠키와 로컬 스토리지가 있습니다. 쿠키는 서버와 클라이언트 간의 데이터 공유에 적합하며, 보안 옵션을 설정할 수 있습니다.

왜냐하면, 쿠키는 HTTP Only, Secure, SameSite 등의 옵션을 통해 보안을 강화할 수 있기 때문입니다.

로컬 스토리지는 클라이언트 측에서 데이터를 영구적으로 저장하는 데 사용됩니다. 그러나, 보안 측면에서는 쿠키보다 취약할 수 있습니다.

다음은 쿠키를 설정하는 예제입니다:

    document.cookie = "accessToken=abc123; Secure; HttpOnly; SameSite=Strict";

이 설정은 쿠키를 안전하게 저장하고, 브라우저에서 접근할 수 없도록 합니다.

실무에서의 적용

실무에서는 인증 토큰과 CORS를 처리하기 위해 다양한 전략이 필요합니다. 예를 들어, Axios 인터셉터를 사용하여 요청과 응답을 처리할 수 있습니다.

왜냐하면, 인터셉터를 사용하면 모든 요청에 공통된 로직을 적용할 수 있기 때문입니다.

다음은 Axios 인터셉터를 설정하는 예제입니다:

    axios.interceptors.request.use(config => {
        const token = localStorage.getItem('accessToken');
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    });

이 코드는 모든 요청에 Access Token을 자동으로 추가하는 방법을 보여줍니다.

또한, Refresh Token을 사용하여 Access Token을 갱신하는 로직도 포함할 수 있습니다.

결론

CORS와 인증 토큰 처리는 웹 개발에서 매우 중요한 주제입니다. 이를 올바르게 이해하고 적용하면, 보안성과 사용자 경험을 모두 향상시킬 수 있습니다.

왜냐하면, 네트워크와 인증 관련 문제를 사전에 예방하고, 발생한 문제를 신속하게 해결할 수 있기 때문입니다.

이번 글에서 다룬 내용을 바탕으로, 실무에서 CORS와 인증 토큰을 효과적으로 처리할 수 있기를 바랍니다.

추가적으로, 관련된 공식 문서와 자료를 참고하여 더 깊이 있는 학습을 진행하는 것도 추천드립니다.

이 글이 여러분의 개발 여정에 도움이 되기를 바랍니다.