localhost랑 127.0.0.1이랑 똑같은거 아니야?

 

localhost와 127.0.0.1은 기능적으로 비슷해 보일 수 있지만, 웹 개발과 CORS(Cross-Origin Resource Sharing) 문제와 관련하여 다르게 취급될 수 있습니다. 둘 다 로컬 머신을 가리키지만, 하나는 도메인 이름(localhost)이고 다른 하나는 IP 주소(127.0.0.1)입니다. 이 차이 때문에 브라우저와 서버가 이 둘을 서로 다른 출처로 인식할 수 있으며, 이는 CORS 정책에 영향을 줄 수 있습니다.

CORS와 출처(Origin)

CORS 정책은 웹 보안의 핵심 요소로, 웹 애플리케이션에서 다른 출처의 리소스를 요청할 때 이를 제한합니다. "출처"는 프로토콜(http://, https://), 호스트(localhost, example.com), 포트(3000, 8080)의 조합으로 정의됩니다. 이 세 가지 중 하나라도 다르면, 브라우저는 두 URL을 다른 출처로 간주합니다.

왜 localhost와 127.0.0.1이 다르게 취급될까요?

• 다른 호스트 이름: 브라우저는 localhost와 127.0.0.1을 다른 호스트로 취급합니다. 이는 CORS 정책에 따라 다른 출처로 간주될 수 있습니다. 예를 들어, localhost에서 서비스되는 페이지가 127.0.0.1의 백엔드 API에 요청을 보내면, 브라우저는 이를 교차 출처 요청으로 볼 수 있습니다.
• 보안 정책: 일부 브라우저 또는 환경에서는 localhost와 127.0.0.1을 다르게 취급하는 추가적인 보안 정책이 있을 수 있습니다. 예를 들어, 개발 도구나 브라우저 확장 프로그램이 특정 출처에 대해 다른 정책을 적용할 수 있습니다.

해결 방법

• 일관된 출처 사용: 개발 중에는 프론트엔드와 백엔드 모두 동일한 호스트 이름(localhost 또는 127.0.0.1)을 사용하여 요청을 보내도록 합니다. 이렇게 하면 불필요한 출처 간 요청을 피할 수 있습니다.
• CORS 설정 조정: 백엔드에서 CORS 미들웨어를 설정할 때, Access-Control-Allow-Origin 헤더에 여러 출처를 허용하도록 설정할 수 있습니다. 예를 들어, localhost와 127.0.0.1 모두를 허용하도록 구성할 수 있습니다.
• 프록시 사용: 개발 환경에서 프론트엔드 서버를 통해 백엔드 요청을 프록시하는 방법을 사용할 수 있습니다. 이 방법은 개발 도구(예: Webpack Dev Server, Create React App)에서 지원하는 경우가 많으며, 이를 통해 모든 요청이 같은 출처에서 오는 것처럼 처리될 수 있습니다.

localhost와 127.0.0.1 사이의 차이는 작아 보일 수 있지만, 웹 개발과 CORS 정책의 관점에서는 중요한 차이를 만들 수 있습니다. 따라서 개발 과정에서 이러한 차이를 인식하고 적절히 대응하는 것이 중요합니다. 안그러면 CORS는 127.0.0.1만 설정해놓고, localhost로 접속해서 왜 cors에 걸리냐고 삽질하는 경우가 있습니다.