CORS 에러? 그놈이 알고싶다

태민·2022년 11월 16일
0

cors라는 것은 Cross-Origin Resource Sharing의 약자이다

일단 이런 문제가 왜 생기는지에 대해 알아야한다

서버에 요청을 하다보면 꼭 한번은 만나는 에러이다

현재 클라이언트를 실행해주는 서버는

client: localhost:3000(react 개발 서버)

서버를 실행해주는 서버는

server: localhost:4000

두 서버는 포트가 다르다
즉 orgin이 다르다

웹개발자 입장에서 생각했을 때

origin이 다르다는 것은 조심해서 다뤄야할까?
막 데이터를 가져가도 되는 것일까?

3000이나 4000이나 거기서 거기아니야?
뭐 비슷하겠지? 라는 생각을 했다면

origin이 다르다는 것을 더 극단적으로 예를 들어보겠다

Navar.com라는 서비스가 있을것이고
Google.com이라는 서비스가 있을거다

도메인이 다르니까 Origin도 다르다

클라이언트가 서버에서 데이터를 막 가져가도 된다는 것은
네이버에서 구글의 데이터를 막 가져가도 된다는 것이고
반대로 구글에서도 네이버의 데이터를 막 다뤄도 된다는 것과 같은 논리이다

이렇게 해도 될까?

당연히 문제가 된다 절대 안된다

웹을 만든 사람은 origin이 다르면 무조건 막는다 라는 전제를 가지고 있다

막는것이 과연 당연한가? 무조건 당연하다

똑같은 컴퓨터에서 실행했지만 Origin이 다르면 꺼내갈 수 없다는 정책이 있고

그걸 어기면 cors정책에 의해 에러가 나온다

그렇다면 이런 에러를 마주했을 때 이 정책은 과연 누가 풀어줘야할까?
클라이언트가 풀어야할까 ? 서버가 풀어야할까 ?

우리가 은행에서 돈을 빌릴 때 남의 통장에서 돈을 못꺼내는 것은
우리가 정하는것인가? 무조건 창구직원이 결정하는 것이다

서버는 창구직원이고 클라이언트는 은행고객이 되는것이다

돈을 줄지 말지 데이터를 줄지 말지는 창구직원 즉 서버가 결정한다

그러니까 서버에서 cors정책을 허용해줘야한다

그렇다면 어떻게 허용할 수 있을까?

서버에서 그것을 쉽게 해주는 라이브러리가 있다

우선 서버에서 npm i cors를 입력해서 추가해주고

var cors = require('cors')를 위쪽에 적어서 Import해주고

app.use(cors())라는 코드를 복사해서 붙여넣어주자

예제에서는 var라고 되어있지만 당연히 const로 바꿔주는게 훨씬 좋다

const로 바꿔주자 !

이렇게하면 에러가 사라지게 된다!

유레카!

profile
몰입이 즐거운 개발자

0개의 댓글