본문 바로가기
Frontend 상식

CORS (Cross-Origin Resource Sharing)

by 뀨ㅎㅎ 2021. 1. 4.

 

 

CORS 정책은 보안을 위한 정책이다.

브라우저와 서버가 있다고 한다면

브라우저가 서버에게 요청을 하고나서 서버에게 응답을 받을 때,

무언가 다르다고 생각되면 CORS를 위반했다고 생각해서 막아버린다.

 

그 무언가가 출처(Origin) 이다.

브라우저의 Origin서버의 Access-Control-Allow-Origin이 맞아야 한다.

브라우저에서 막는 것이기 때문에,

back 서버에서 브라우저에게 안전한 것이라며 오류가 나지 않도록 조치를 해줘야 한다.

 

또한 민감한 정보를 그냥 주지않기 때문에, 다른 정보까지 담고 싶다면 옵션을 설정해줘야한다.

 

 

 

여태 본 방법은 이렇다.

 

 

1) Proxy를 이용해서 클라이언트가 front서버와 동일한 주소를 갖도록 해준다.

http-proxy-middleware 라는 라이브러리가 있다.

 

2) back 에서 origin을 설정해준다. 이것은 cors 라이브러리를 이용한다.

나중에 쿠키와 같은 정보를 보내주고 싶다면, 옵션으로 credentials도 추가해야한다.

또한 front 에서도 credential을 인식할 수 있게 설정해줘야한다.

 

 

 

 

 

'Frontend 상식' 카테고리의 다른 글

객체지향 프로그래밍이란?  (0) 2021.01.03
꼭 알아야하는 babel과 webpack  (0) 2021.01.02
RESTful API  (0) 2021.01.01

댓글