CORS(Cross-origin resource sharing)

same-origin policy - 동일 출처 정책

• 스킴/호스트/포트 가 같아야 한다

  http://www.naver.com:80
  http - 스킴
  www.naver.com - 호스트
  80 - 포트

• 위 내용이 다르면 출처가 다르다 인식하고 에러뿜
  누가?
  브라우저(browser)가

작동방식

• 브라우저가 서버에 요청하면 서버는 요청에 응답한다.
  이때 서버는 헤더에 Access-Control-Allow-Origin의 값을 같이 보내는데
  뜻은 이 리소스에 접근이 가능한 출처는 오직 Access-Control-Allow-Origin에 저장된 출처뿐이다.

• ex)
  Access-Control-Allow-Origin : https://naver.com:80
  이 리소스에 접근이 가능한 출처는 오직 https://naver.com:80 뿐이다

• 서버에서 지정한 출처또는 동일 출처가 아닌데 서버에 요청하게되면 CORS에러를 뿜

해결?

• 웹팩 프록시 부분을 수정하여 브라우저를 속이기
• 브라우저를 거치지 않는 방식으로 요청하고 값만 연동해서 받아오기
• 서버에 cors설정하여 특정 주소는 SOP에 위반하지만 허용해주라~ 하고 설정하기

정리

• 가장쉬운방법은 백엔드단에서 cors 허용주소를 추가해주는 식으로 해결한다
• 꼭 cors위반해서 뽑아오고 싶으면 브라우저를 사용안하는 환경(python이나 node나 뭐 등등..)에서 요청하고 프론트와 연동하여 해당 값을 받아오면 된다