#17 CORS

CORS에러가 나는 이유는
웹브라우저는 HTTP요청에 대해서 어떤 요청을 하는가에따라 각자 다른 특징을 갖고있기 때문이다.

CORS는 Cross-Origin Resource Sharing의 줄임말로 교차 출처 리소스 공유 정책라고도 한다.
교차 출처라고 하는 것은 (엇갈린) 다른 출처를 의미하는 것으로 보면 된다.
출처라는것은 프로토콜, 호스트명, 포트를 묶어 부르는것
( https://domain.com:3000/user?query=name&page=1에서 https://domain.com:3000가 출처)

SOP(Same Origin Policy) 정책은 단어 그대로 동일한 출처에 대한 정책을 말한다. 그리고 이 정책은 동일한 출처에서만 리소스를 공유할 수 있다.
출처가 다른 두 어플리케이션이 소통하는 환경은 해킹의 위험성이 있다. 그래서 SOP정책으로 브라우저단에서 사전에 해킹을 방지하는것

모든 어플리케이션의 통신을 막을 수는 없기 때문에 SOP정책으로 막혀있지만 CORS정책을 준수하면 외부통신할수 있게한다.

CORS동작방식

1. 클라이언트에서 서버로 HTTP요청의 헤더에 Origin이라는 필드를 담아 전달

2. 서버는 응답헤더에 Access-Control-Allow-Origin필드를 추가하고 이 리소스에 접근 허용된 출처를 담아 클라이언트로 보낸다.

3. 클라이언트는 Origin과 Access-Control-Allow-Origin을 비교해 같을때만 허용

해결방법

1. 다른 사람이 만든 프록시 서버 이용
2. 클라이언트 : http-proxy-middleware 사용하기
3. 서버에서 Access-Control-Allow-Origin 헤더 세팅하기

참고 출처 : https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F