오늘은 CORS ❗️
사실 저번 정리에 연결되어서 포스팅을 한다면 CORS보다는 클로저, this 등이 먼저 정리되어야한다. 그런데 아직 클로저나 ,this에 대해 정확하게 알고있지 않아서 필자가 이해를 충분히 하면 그때 해당 주제로 포스팅해야겠다..!
그럼 갑자기 왜 CORS를 다루나?? 보면 프론트엔드에서 주로 만나는 오류는 CORS오류이기도하고 이 CORS를 이해하는 것이 프론트와 백엔드의 상호관계를 이해하는데 도움이 되기 때문이다! 이번 포스팅을 진행하면서 개인프로젝트를 했던 경험을 기반으로 CORS를 다시한번 정리해보겠다! 🌳
CORS 왜 발생할까 ❓
먼저 CORS의 의미를 알아야한다
Cross-Origin Resource Sharing
뭐 다른출처가 공유된다.라는뜻
기본적으로 SOP 법률을 따른다.
Same-Origin Policy
동일 출처 정책
기본적으로 프론트와 백엔드는 API를 통해 데이터를 주고받는데 이때 동일 출처 정책을 따른다는 것이다.
그럼?? 출처가 같아야 한다 아니면 ?? CORS에러가 발생할 수 있다.
다른출처를 공유하려면 어떤 설정을 해야한다? 이런 의미가 될 수 있다.
일단 정리하면 다음과같다.
출처는 같아야하고 다를거면 설정해라 안그럼 cors에러발생시킴 ㅅㄱ
그럼 출처란 무엇일까?
Origin: http:hostname:port
이게 출처이다.
즉 protocal, hostname, port를 합친게 Origin인 것이다.
protocal ❓
그냥 컴퓨터끼리 어떻게 소통할건지, 소통하는 방법
그럼 cors가 왜 일어날까??
네이버를 예로들어보자
Naver의 클라이언트 서버에서 네이버의 화면을 보여줄 것이다. 여기서 어떤 버튼을 클릭하면 백엔드 서버에 있는 API가 작동돼서 어떤 요청을 처리해 줄 것이다.
이때 클라이언트서버와 백엔드서버의 Origin이 다르면?? Cors에러가 발생하는 것이다!
그러니까 사실 사용자 보다는 개발자들이 개발할 때 많이 마주할 수 있다. 주로 test환경에서 많이 마주할 것이다 !
Cors 에러 해결방법 ❓
프론트단에서 해결법: 프록시 서버를 사용하자 ❗️
프록시서버: 서버 앞단에서 중계역할을 하는 서버
- pc와 외부 인터넷 사이의 징검다리 역할
- 중계를 해주기 때문에 외부 인터넷에서는 Client의 정보를 알 수 없다.
- 외부 인터넷의 내부 침입을 막는 방화벽과 관련이 있다.
- Proxy Server는 캐시 기능이 있다.
- IP를 바꾸기 위한 용도로 많이 사용되고 있다.
- A Client가 B Proxy에 접근하여 C인터넷(google.com)에 접속하는 방식
- A Client (Proxy Server 설치) 한 후 에 C라는 컴퓨터를 감시한다면, C 컴퓨터의 브라우저 설정을 C 컴퓨터 IP 주소로 하면 C 컴퓨터 그룹 A Client에 남길 수 있다.
백엔드단에서 해결법: cors를 허용하자 ❗️
const cors = require("cors")
app.use(cors()) 여기서 이제 허용되는 Origin을 만들어놓는다
=> white list라고한다.
Preflight request ❓
GET, HEAD, POST 는 simple request로 그냥 요청이 된다.
그러나 DELETE, PUT는 Preflight request가 된다.
왜?? 삭제하거나 추가하는 과정은 보안상 더욱 신중하니까
obtion 메서드로 한번 더 cors인지 확인을 한다.
디테일하게 학습하지는 못했다. 코딩테스트를 요즘 준비하느라 많이 쫓기고있는데 흠 .. 그래도 2시간정도는 이렇게 할애를하면서 얕더라고 멀리 지식을 쌓아나가야겠다.
블로그에 다 정리는 못했지만
강력추천 cors블로그
여기 블로그에 아주 자세히 정확하게 적혀있다. 내용이 부족한 부분은 이곳을 참고하면 더 좋을 것이다!
