리액트로 서버와 통신할 때 network error 해결 방법(feat : CORS에러)

react에서 axios를 이용해 nest서버로 요청을 보냈는데

network error가 발생했다.

 

에러의 종류는 CORS 에러였는데

간단하게 CORS에 대해 알아보자면

CORS는 Cross Origin Resource Sharing의 약자다.

한글로는 교차 출처 리소스 공유라고 부르는데

여기서 Origin에 주목할 필요가 있다.

 

origin은 protocol, hostname, port의 집합이다.

예를들어 http://localhost:3000이 프론트 주소고

http://localhost:8080이 백엔드 주소라면

이 둘은 protocol이 http로 동일하고,

hostname이 localhost로 동일하지만,

port는 3000과 8080으로 서로 다르다.

그렇기 때문에 프론트와 백엔드 서버는 Origin이 다른게 된다.

 

다음으로는 웹에서 규정된 SOP에 대해 알아야 한다.

SOP는 Same Origin Policy인데

한글로는 동일 출처 정책이라고 한다.

특정 origin에서 불러온 데이터가

다른 출처에서 불러온 리소스와 상호작용하는 것을

제한해서 서버가 공격 받을 수 있는 경로를 줄여주는 보안 정책이다.

 

결국 웹에서는 SOP 때문에 다른 origin의 리소스에 접근하는 것을 제한한다.

 

내가 만난 network error도

origin이 http://localhost:3000인 리액트 앱에서

origin이 http://localhost:8080인 네스트 서버에

요청을 했기 때문에 발생한 에러였다.

 

다시 CORS로 돌아와서,

아까 CORS는 교차 출처 리소스 공유라고 했다.

말그대로 origin(출처)이 다른 데이터(리소스)를 공유한다는 뜻인데

내 경우와 같이 origin이 다르면 SOP에 의해

데이터를 공유하지 못하므로 이를 CORS에러라고 한다.

 

CORS 에러의 해결방법은 쉽다.

리액트에서 package.json 파일에 코드 한줄을 추가하면 된다.

{
    "name": "likelionsnsmusic",
    "version": "0.1.0",
    ...
    // 아래 코드 한 줄(리액트앱이 사용중인 origin)을 추가하면 된다.
    "proxy":"http://localhost:3000",
    ...
}

이렇게 하면 프록시 설정이 되어서

프론트와 백엔드의 origin을 동일하게 설정해줄 수 있다.

 

프론트와 백엔드의 origin이 동일하면

SOP를 위반하지 않고, CORS 에러가 발생하지 않게 된다.