본문 바로가기

🔥 🔥

CORS란?

반응형

CORS

= Cross  Origin Resourse Sharing, 교차 출처 리소스 공유

= 서로 다른 도메인 또는 포트에서 데이터(ex) API의 요청, 응답)를 주고 받을 수 있도록 하기 위한 정책, 메커니즘

예를 들어, 다른 도메인에서 이미지를 가져오거나 웹폰트,css를 가져와서 사용하는 것

 

CORS의 등장 이유

- Same-Origin Policy, 동일 출처 정책 때문이다, Same-Origin Policy는 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한 하는 보안방식으로 서로 다른 origin에서의 자원 공유를 제한한다. 

- Same-Origin Policy 적용시 다른 origin 에서의 자원 요청이 불가능하기 때문에, SPA에서 클라이언트와 서버의 도메인을 따로 유지하는 경우 자원공유를 할 수 없게 된다.

+ Same-Origin Policy

- 보안을 위해 프로토콜, 호스트, 포트가 동일한 서버로만 데이터를 주고받을 수 있도록 한 정책

CORS 에러(요청 허가) 해결

- 미들웨어 설치, 설정 

 

npm install cors

 

- 프록시방식 사용

    - 프론트에서 요청 header에 'Access-Control-Allow-Origin:'도메인:포트 or *(모든도메인)' 옵션 사용

 

 

'🔥 🔥' 카테고리의 다른 글

모듈 번들러, 트랜스 파일러  (0) 2020.12.18
Call Stack  (0) 2020.12.17
LocalStorage, SessionStorage, Cookie  (0) 2020.12.11
네트워크 기본 지식  (0) 2020.12.09
SSR, CSR과 SPA의 등장배경  (0) 2020.12.09