Cross-Origin Resource Sharing, CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.
Cors : Cross-Origin Resource Sharing은 교차출처공유라는 것인데 이를 허용 해줌으로써 다른 출처간의 리소스를 공유할 수 있습니다.
Cors에 대해 덧붙여서 설명드리려면 일단 SOP : same-origin-policy 에 대해 말씀을 드려야 할거같은데요. 동일출처정책이라는 의미로 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는것을 제한하는 보안방식입니다.
이와같은 제한은 악의를 가진 사용자가 정보를 탈취하는것 막기 위해서인데, 웹이라는 오픈스페이스 환경에서 다른 출처에 있는 리소스를 사용하는 일은 흔해서 이를 무작정 막을수도 없습니다.
그래서 이를 허용하기 위해 SOP의 예외조항으로 면접관님이 말씀하신 Cors 라는 정책을 지킨 요청은 출처가 다르더라도 리소스 공유를 허용하게 됩니다.
nodeJS에서는 cors미들웨어 패키지를 설치하고 리콰이어 해와서 app.use에 cors를 넣어 모든요청을 허용해줄수도 있고, app.use 안에 넣은 cors에 객체형태로 origin에 url을 할당한 변수를 넣어 특정 url만 허용해줄수도 있습니다.
참고 : 모든요청 허용 app.use(cors()) , 특정요청 허용 app.use(cors(corsOption))
Simple requests(GET, POST, and HEAD)
다음과 같은 조건들을 가질 경우 Simple requests
- METHODS: GET, POST, HEAD
- Content-Type: application/x-www-form-urlencoded, multipart/form-data, or text/plain
- XMLHttpRequestUpload 객체에 등록되지 않은 이벤트 리스터
- ReadableStream 가 아닌 객체
- Access-Control-Allow-Origin header 체크되어 있는 상태
Preflight requests (OPTIONS)
Simples requests 조건에 맞지 않는 requests를 모아 Preflight requests라 말한다.
- METHODS: OPTIONS
- Access-Control-Request-Method: GET, POST
- Access-Control-Request-Headers
- Origin
# Request
curl -i -x OPTIONS localhost:3001/api/ping \
-H 'Access-Control-Request-Method: GET' \
-H 'Access-Control-Request-Headers: Content-Type, Accept '\
-H 'Origin: http://localhost:3000'
- 예시
404 No Content
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD, PUT, PATCH, POST, DELETE
Vary: Access-Control-Request-Headers
Access-Control-Allow-Headers: Content-Type, Accept
Content-length: 0
Date: Fri, 05 Apr 2019 11:41:08 GMT
Connection: keep-alive
'기술면접' 카테고리의 다른 글
브라우저 렌더링 (작동) 원리 (0) | 2021.12.08 |
---|---|
lazy loading (0) | 2021.12.06 |
Client Side Rendering 과 Server Side Rendering 의 차이 (0) | 2021.12.06 |
script, script async 와 defer (0) | 2021.12.03 |
REST한 API에 대해서 자세히 설명해주세요. (0) | 2021.11.19 |