2009년에 CORS가 나오기 전까지 다른 도메인에 비동기 요청을 하기 위해 사용되던 방법이다. 자바스크립트 파일 내에서 다른 도메인에 데이터를 요청할 경우 SOP에 위배되어 에러가 나게 된다. 예를들어, 'https://test.com'에서 요청을 보내면 https://test.com도메인을 가진 서버에만 요청을 보낼 수 있있다.
하지만, html파일내에 있는 태그를 이용하면 SOP를 피해갈수 있다. https://localhost에서 https://test.com (서로 다른 도메인)의 데이터를 가져올 수 있다. 다만 조건이 있다.
https://simsimjae.medium.com/cors와-jsonp에-대해서-aa3ec0456e97
자바스크립트 엔진 표준 스펙의 보안 규칙으로 하나의 출처(Origin)에서 로드된 자원(문서나 스크립트)이 host,protocol,port가 일치 하지 않는 자원과 상호작용 하지 못하도록 요청 발생을 제한하고 동일 출처(Same Origin)에서만 접근이 가능한 정책
Origin이란?
protocol + hostname + port를 합친 것을 말한다.
즉 cross origin = 다음 중 하나라도 다른 경우에 발생한다.
- 프로토콜(http != https)
- 도메인 domain.com, other-domain.com
- 포트 번호(ex: 3000번 포트와 4000번 포트)
다른 출처의 리소스를 불러오기 위해 그 출처에 올바른 Cors 헤더를 포함한 응답을 반환해야 한다. CORS는 웹페이지상에서 자바스크립트를 이용하여 XHR(XMLHttpRequest)을 다른 도메인으로 발생 시킬 수 있도록 해주는 기능을 가지고 있고 XHR 기반 cross-origin HTTP 요청을 이용하여 자원을 공유해야 하는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원한다.
Simple Request
Preflight Request
Credentialed Request
흔히 'CORS 해결'이라고 표현하기 때문에 CORS 자체가 이슈나 에러라고 착각하기 쉬운 것 같다.
CORS는 에러가 아니고 앞서 정리 했듯 서로 다른 origin 간에 리소스를 전달하는 방식을 제어하는 매커니즘이다.
CORS 이슈는 동일 출처 정책(SOP)에 의거해 다른 출처의 리소스를 사용하거나 상호작용을 하지 못하도록 막고 경고가 발생 하는 것 이고, 이를 해결하기 위해 교차 출처 리소스 공유(CORS)를 사용해 접근을 허용 하도록 설정하는 것이다.
그러니 'CORS 해결'을 더 명확하게 표현하면 'CORS 이슈 해결'이라 할 수 있겠다.
(클라이언트)React.dev -> http://localhost:3000
(서버) nest.js -> http://localhost:4000
/board로 path 설정 후 전송
결과: 3000번 포트도 먹고 4000번 포트도 먹음
enable_cors x / proxy o
/boards로 path 설정
결과: 3000번 포트, 클라이언트 포트로 전송시 ok -> 프록시가 origin 자동으로 설정
http://localhost:3000 으로 설정
결과: 프록시에서 설정한 주소와 매칭됨
http://localhost:4000 으로 path 설정
결과: 에러 발생!
프록시: front 포트 - 3000
서버 direct: sever 포트 - 4000
크로스 오리진 정책이란 http 헤더에 근거한다. 해당 헤더는 도메인, 포트 등을 포함하는 오리진을 나타내는 서버를 허용하는 역할을 한다. 결론적으로 Cors에러는 서버에서 이를 명시하는가 아닌가에 따라 다르게 작동하며 에러를 나타내는 부분은 브라우저에서 처리한다.