cors란 ?
: 서로 다른 출처(origin)를 가진 주소로 요청이 들어왔을 때 발생할 수 있는 에러
: 출처(origin)란, port번호까지 포함한 url을 의미
예를 들어 이러한 url(http://localhost:3000/tokens/phone)에서 origin은http://localhost:3000이다
SOP 정책
: same origin(원본,출처) policy(규칙)
: 이는 간단하게 말해 주소가 같은 곳에서 요청되고 있냐?라는 의미이다. 즉 같은 주소에서만 API 요청 가능함(엄격한 편)
: 프론트엔드랑 백앤드랑 주소가 같은 곳에서 요청이 오고 있는지를 확인하는 것
: 네이버(프론트)->네이버(백) / 다음(프론트)->다음(백)
CORS의 발생배경 및 취지
: 타 주소에서도 API 받아와서 쓸 수 있게 하자
즉, 자유도를 풀어주자 이런 취지에서 나온 것이 CORS이다
: CORS는 'Cross Origin Resource Sharing' 의 줄임말로 앞서 문제라고 표현은 했지만 사실 나쁜 것은 아님.
: 요청지가 크로스 되더라도 자료를 공유하자
: CORS가 좋은 취지로 만들어진 것 확실하지만 누구한테나 막 줄 수 없기 때문에 백엔드 컴퓨터서버에서 CORS 허용 규칙을 정함
: 허용 규칙이란 백엔드 서버에서 API 요청할 수있는 주소를 등록함
: 백엔드 서버 js파일에 요청할 수 있는 주소를 따로 정해놓진 않는 경우 누구나 요청가능하다는 의미이다
CORS의 특징
API요청은 사실상 두번의 과정을 통해 이루어진다.
첫번째 요청은 preflight라고 해서 API요청이 가능한지, 가능하면 어느 범위(get,post..)까지 가능한지를 먼저 요청하는 사전 요청단계이다.
만약 CORS를 통해 허용되어 있지 않은 상태이면 해당 프론트엔드 '브라우저'에 의해 차단되어 두번째로 진짜 API요청을 하지 않고, 허용 상태이면 다시 API요청을 보내는데 이것이 진짜 요청하는 것이라고 보면 될 것 같다!
하지만 프론트 쪽 브라우저에 의해서 차단이 되다 보니깐 꼼수 쓸 수 있음!
예를 들면 네이버 프론트에서 네이버 백엔드로 API요청 보내고 네이버 백엔드에서 다음 백엔드로 API 요청해서 받을 수 있는다고 가정하자. 이렇게 우회해서 대신 처리해 주는 서버를 proxy 서버라고 한다. 왜냐하면 백엔드 API는 콜스 안걸리기 때문에
(+) 브라우저에서 금지하는거니깐 스마트폰상에서도 가능한지?
: 앱에서 요청하는 경우에도 우회접속 가능
(그러나 휴대폰 브라우저로 하면 차단 ON!)
결과적으로 봤을 때 CORS는 브라우저를 보호하기 위해 만들어진 것이다!!!!
CSRF (cross site request forgery : 크로스 사이트 요청 위조) 와 같은 상황으로부터 보호해주는 역할.
브라우저에는 변수 외에도 쿠키, 로컬/세션 스토리지와 같은 자체적인 저장공간 있다. 이 공간에는 프론트 서버로부터 로그인 API요청을 하고 나면 백엔드 서버로부터 로그인 증표(?)와 같은 정보가 쿠키의 형태로 저장된다. 한번 저장된 이후로는 API요청을 할 때마다 쿠키가 자동으로 같이 따라 들어가게 된다고 한다.만약 나쁜 마음을 먹은 해커가 기존 사이트와 육안으로는 동일한 사이트를 만들어서 해당 백엔드 서버로 API요청을 하게 할 수도 있다. 그렇게 되면 클라이언트가 원치 않던 요청을 자동으로 로그인 증표 인증을 통해 API 작동이 이루어질 수도 있는데 이러한 상황을 막기 위해 CORS가 작동하는 것이다. CORS가 정상 작동된다면 해당 브라우저 상에서 차단이 되기 때문에 이러한 상황을 사전에 차단가능한 것이다.
추가적으로 설명하자면 위에서 말한 로그인 증표(쿠키)는 브라우저 전체에 저장이 되는 것이고 쿠키는 쿠키마다 발급한 (백엔드)도메인 주소가 저장된다. 그렇기 때문에 우회해서 들어가는건 해당 백엔드가 일치하지 않으면 따라 가지 않음! 쿠키에 저장된 도메인 주소와 백엔드 컴퓨터의 주소가 일치해야 따라가는 것임
CORS 설치법 및 사용법
- 해당 터미널로 이동 후 yarn add cors 입력
- 백엔드 서버 js파일에 아래 코드 입력
import cors from 'cors'
const app = express() // express이용한 것이라 가정
app.use(cors({origin:요청 허용할 주소}))
// 만약 apollo 서버를 이용중이라면
const server = new ApolloServer({
typeDefs:typeDefs,
resolvers:resolvers,
cors:true
// 모든 사이트 허용하고 싶을 때
cors: { origin: ["https://naver.com", "https://daum.net"] }
// 특정 사이트만 지정하고 싶을 때
});