CORS(Cross-origin resource sharing)

nohsangwoo·2021년 7월 5일
0

ReactJS

목록 보기
2/2
post-thumbnail

same-origin policy - 동일 출처 정책

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

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

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

작동방식

  • 브라우저가 서버에 요청하면 서버는 요청에 응답한다.
    이때 서버는 헤더에 Access-Control-Allow-Origin의 값을 같이 보내는데
    뜻은 이 리소스에 접근이 가능한 출처는 오직 Access-Control-Allow-Origin에 저장된 출처뿐이다.
  • 서버에서 지정한 출처또는 동일 출처가 아닌데 서버에 요청하게되면 CORS에러를 뿜

해결?

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

정리

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

0개의 댓글