CORS 에러 해결하기

CORS 오류는 Cross-Origin-Resource-Sharing 정책을 지키라고 나오는 오류이다.

 

개발을 할 때 

client 는 localhost:3000

server 는 localhost:5000

으로 개발을 한다고 할 때

 

client와 server가 데이터를 주고 받기 위해 fetch나 axios등을 사용하였는데 CORS 에러가 나왔다.

이는 두개가 origin이 달라서 데이터가 출처가 다르다고 생각하여 나오는 에러이다.

 

origin이란 http://localhost:포트/api?name=asd&page=1#foo 이런식으로 url이 있을 때

   Protocol : http://

   Host : www.naver.com  또는 localhost 등

   Port : :3000

   Path : /api

   Query String : ?name=asd&page=1

   Fragment : #foo

url을 구성하는 요소가 이런식으로 나뉜다.

여기서 Protocol, Host, Port 를 합친것이 origin이다.

 

위에서는 포트가 다르기에 origin이 다르다고 하는것이다.

 

origin이 다른 사이에는 데이터를 막 꺼내가도 되는건가?

당연히 아니다. 조심해야 하기 때문에 위같은 정책이 있고 에러를 표시하는 것이다.

 

결론 : origin이 다르면 데이터를 함부로 꺼내갈 수 없다. 라는 것이 CORS 에러이다.

 

남의 통장에서 돈을 못 꺼내간다는 예를 들었을 때 (유튜브 라매개발자님의 영상을 보았다.)

남의 통장의 돈을 못 꺼내간다는 룰은 우리가 정하는 것인가 은행직원이 정하는 것인가?

은행직원이 정하는 것이다.

그렇기에 데이터를 꺼내갈 수 없다는 client가 아니라

server에서 정한다.

그러므로 server에서 cors 정책을 해결해야 한다.

 

server에서 CORS 정책을 허용해보겠다.

이를 쉽게 해주는 라이브러리가 있다. 

cors 라는 라이브러리이다.

이를 server에 설치해준다.

server 디렉토리로 들어가서 server에 있는 package.json에 cors가 들어갈 수 있도록 설치를 해보자.

 

1. server 폴더에 진입 후 아래와 같이 입력하여 cors 설치

npm install --save-dev cors

 

2. 이제 이 미들웨어를 코드에 추가해준다.

server.js 또는 각자의 서버 js에 아래와 같이 추가 한다.

const cors = require('cors');

app.use(cors());

 

그럼 성공적으로 통신이 된다.

 

확인은 웹페이지에서 개발자 모드로 들어가 Network 탭에서 확인할 수 있다. 

아래와 같이 서버 상태 코드가 200으로 정상적이고 콘솔창에 데이터를 잘 받아온 것도 확인된다.