CORS란? Cross-Origin-Resource-Sharing 이다.
이는 서로 다른 출처(origin)를 가진 주소로 요청이 들어왔을 때 발생할 수 있는 에러입니다.
여기서 말하는 출처(origin)이란, port번호까지 포함한 url을 의미합니다.
예를 들어 이러한 url(http://localhost:3000/tokens/phone)에서 http://localhost:3000을 origin이라 부릅니다.
CORS 기본 동작 과정
클라이언트에서 HTTP 요청의 헤더에 Origin을 담아 전달.
서버는 응답헤더에 Access-Control-Allow-Origin을 담아 전달.
클라이언트에서, 자신이 보냈던 요청의 Origin과 서버가 보낸 Access-Control-Allow-Origin을 비교.
유효하지 않다면(비교 했을 때 다르다면) 그 응답을 사용하지 않는다. 즉, CORS정책으로 Origin을 비교하는 것은 브라우저에서 처리하기 때문에 서버에서 정상적으로 응답을 하였어도 브라우저가 응답을 CORS 위반이라고 분석하면 그 응답을 사용할 수가 없다.
CORS 에러 해결하기
1.웹 브라우저 실행 옵션이나 플러그인을 통한 동일 출처 정책 회피하기
동일 출처 정책은 브라우저에서 임의로 하는 것이기 때문에 브라우저에서 동일 출처 정책을 사용하지 않으며 된다.
2.jsonp 방식으로 json 데이터 가져오기
자바스크립트 파일이나 css 파일은 동일 출처 정책에 영향을 받지 않고 가져올 수 있다.
이를 이용해서 자바스크립트 파일을 가져와서 이를 json 형식으로 파싱해서 데이터를 사용할 수 있다.
참조
