” 프론트엔드 매일메일 136번 질문입니다.
1 정답은?
프록시 서버를 이용합니다. 프록시 서버는 중간에 통신을 중개해 주기 때문에 같은 출처로 위장하여 SOP를 우회할 수 있습니다.
2 왜?
SOP는 Same-Origin Policy로 같은 출처면 브라우저 딴에서 공유를 허용한다는 것입니다.
CORS는 Cross Origin Resource Sharing이고, 서로 다른 출처여도 공유를 허용하는 정책입니다.
기본적으로 브라우저는 SOP 정책을 적용하기 때문에 CORS 에러가 터집니다.
따로 설정하지 않으면 당연히 터집니다. 왜? 브라우저는 SOP 정책이기 때문입니다.
여기서 개념은 맞는데, 한 가지 명확히 해야 할 것이 있습니다:
SOP (Same-Origin Policy) 는 “같은 출처에서만 리소스 공유가 가능하다”는 보안 정책입니다.
CORS (Cross-Origin Resource Sharing) 는 “다른 출처에서도 특정 조건을 만족하면 허용한다”는 개방 정책입니다.
즉, CORS는 SOP를 우회하기 위한 메커니즘이지, CORS 자체가 보안 정책은 아닙니다.
따라서 “CORS 에러가 터진다”는 것은 정확히는 SOP 정책 위반으로 CORS 요청이 실패한 것입니다.
3 프록시 서버는 왜 됨?
프록시 서버는 왜 되냐? SOP 정책이나 CORS 정책이나 다 브라우저 단에서 발생하는 문제입니다.
서버 단에서 보낸 요청과 응답은 정상적으로 브라우저까지 도착합니다. 이후 브라우저에서 정책에 따라 불법(?)적인 응답들은 클라이언트에게 전달해주지 않는 것입니다.
- 프록시 서버는 보통
/api경로를 추가해서 통신하는데 그럼 같은 출처, source죠?- 또 브라우저를 끼지 않으므로 정상적으로 요청과 응답을 받습니다.
여기서 두 가지 포인트가 있습니다:
🔹 프록시 서버가 같은 출처가 되는 이유:
예를 들어, 클라이언트가
http://localhost:3000에서 요청을 보내고, 프록시 서버가/api로 설정되어 있다면:http://localhost:3000/api/some-endpoint→ 같은 출처입니다.브라우저 입장에서는 단순히 같은 도메인에서 요청을 보내는 것으로 간주합니다.
🔹 브라우저가 끼지 않으므로 정상적으로 통신한다?
여기는 약간 오해가 있을 수 있습니다.
프록시 서버를 설정한 후에도 클라이언트는 여전히 브라우저를 통해 요청합니다.
차이점은 브라우저가 프록시 서버로 요청을 보내면, 프록시 서버가 외부 서버와 통신한다는 것입니다.
외부 서버에서 응답이 오면 프록시 서버는 이를 클라이언트에 전달합니다.
이 과정에서 브라우저는 같은 출처로 인식하기 때문에 SOP를 위반하지 않고 통신이 이루어집니다.