CORS 에러 해결하기

리액트를 개발하던 중..

개념 공부할 때 보았던 CORS를 에러로 맞딱드리게 되었다...!🤨

 

CORS

Cross-Origin Resource Sharing(CORS)은 추가적인 HTTP header를 사용해서 애플리케이션이 다른 origin의 리소스에 접근할 수 있도록 하는 메커니즘이다.

서비스하고 있지 않은 사이트에서 세션을 요청해서 세션을 획득할 수 있다면 해당 사이트는 악의적으로 내 세션을 탈취하거나 다른 행동을 할 수 있다. 그래서 브라우저에서는 이러한 요청을 막습니다. 피싱사이트가 대표적인 공격 사례로 피싱사이트가 있다. 이러한 것을 막고 허용한 origin만 요청하기 위해 CORS가 필요하다.

브라우저가 리소스를 요청할 때 추가적인 헤더에 정보를 담는다. 내 origin은 무엇이고 어떤 메소드를 사용해서 요청을 할 것이고 어떤 헤더들을 포함할 것인지를 담아 서버에 전송한다. 서버는 서버가 응답할 수 있는 origin을 헤더에 담아서 브라우저에게 보낸다. 브라우저가 이 헤더를 보고 해당 origin에서 요청할 수 있다면 리소스 전송을 허용하고 만약 불가능하다면 에러를 발생시킨다.

 

즉. 다른 웹사이트에서 서버로 데이터를 보내는 것을 막기 위한 것이다!

 

다음과 같은 에러가 떴다.

위와 같이 에러가 떴고

해결책은 나름 간단하다!

 

리액트에서는 프록시 설정을 통해 간단하게 해결 가능하다!😉

 

package.json에 

"proxy": "http://서버 도메인"

를 추가하고,

 

본 코드는 다음과 같이 수정한다.

const formData = new FormData();
    formData.append("file", file);

    // 서버로 데이터 전송
    axios
      .post("/api/files-test", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then((response) => {
        // 응답 처리
        console.log("요청 성공");
        console.log(response);
      })
      .catch((error) => {
        // 예외 처리
        console.log("요청 실패");
        console.log(error);
      });

 

 

해결 완료!

 

에러로 쩔쩔매다가 해결했을 때 그 상쾌함은 정말 짜릿하다.

아 그렇구나.. 하고 넘어갔던 개념을 직접 에러로 보게 되니 기본 개념의 이해도에 대한 중요성을 깨달을 수 있었다. 기본기 화이팅!