[React/Axios] 🤬 Axios message: 'Network Error'(CORS 오류)

🚨 오류 발생

AxiosError message: 'Network Error'

const userInfoPatch = async (userInfo) => {
    try {
      // url: 서버 주소, id: 사용자 아이디, userInfo: 사용자 정보 객체
      await axios.patch(`${url}/member/${id}`, userInfo).then(() => {
        alert('수정이 완료되었습니다.');
      });
    } catch (error) {
      console.log(error);
    }
  };

클라이언트 코드에서는 별다른 문제가 없어 보였고, 서버 측에서 분명 접근을 허용하는 메서드로 PATCH에 대해 따로 처리를 해주었다. 프로젝트를 진행하면서 GET, POST, DELETE 등 여러 방식으로 서버에 요청할 수 있었기에 더욱 이유를 찾기 쉽지 않았다.

 

CORS(Cross-Origin Resource Sharing)란❓

'교차 출처 리소스 공유' 라는 뜻을 가지는 해당 정책은 서로 다른 출처의 리소스에 request를 할 때 보안상의 이유로 교차 출처 HTTP 요청을 제한하는 것이다.

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

ex) 리액트 서버 http://localhost:3000, 스프링 서버 http://localhost:5000

브라우저는 각기 다른 서버(리액트, 스프링)에 요청을 하게 되는데 이때 CORS 정책의 이유로 Error가 발생한다.

 

💡 해결 방법

이러한 문제에 대해 서버에서는 해결 방법을 찾지 못했다. 그래서 클라이언트에 proxy를 두어 처리를 하기로 했다.

프록시(proxy) 서버란❓

• 클라이언트와 서버 사이에서 데이터 요청과 응답을 대신 받아주는 역할
• 보안상의 문제로 직접 통신을 주고 받을 수 없는 사이에서 프록시 서버가 중계하는 역할

 

프록시(proxy) 설정 방법

1. http-proxy-middleware(참고한 사이트)
2. package.json에 proxy 추가(create-react-app으로 프로젝트를 생성한 경우만 가능) ✅

package.json

"proxy": "http://localhost:5000",

package.json 파일에 "proxy": "서버 도메인" 한 줄을 추가해주면 된다.

 

그리고 다음과 같이 proxy 주소를 제외하고 path만 입력한다. axios 사용 시 '/member/사용자 아이디'라고 하면 'http://localhost:5000/member/사용자 아이디'로 가게 된다.

const userInfoPatch = async (userInfo) => {
    try {
      // id: 사용자 아이디, userInfo: 사용자 정보 객체
      await axios.patch(`/member/${id}`, userInfo).then(() => {
        alert('수정이 완료되었습니다.');
      });
    } catch (error) {
      console.log(error);
    }
  };

 

💻 참고한 사이트

PROXY SERVER란?

🤬 CORS? 그게 뭔데 !