[React] CORS에러 해결방법 (Proxy server 설정)

CORS란?

 

CORS는 Cross-Origin Resource Sharing로, 웹 어플리케이션에서 다른 도메인으로부터 리소스를 요청할 때 발생하는 보안 문제이다. 기본적으로 브라우저는 같은 도메인에서만 요청을 보낼 수 있도록 제한하고 있기 때문에, 다른 도메인에서 데이터를 가져오려면 서버 측에서 허용을 해줘야 한다.

 

서버측에서 CORS를 설정하는 방법은 Access-Control-Allow-Origin 헤더를 사용하는것이 일반적이다. 이 헤더를 사용하여 요청을 보내는 도메인을 명시적으로 허용해 주는 것이다.

 

하지만 서버측에서 CORS를 설정하는 것은 보안상의 이유로 권장되지 않는다. 만약 서버측에서 모든 도메인을 허용해주는 설정을 하게 된다면, 악의적인 사용자들이 이를 이용하여 CSRF 등의 보안 공격을 수행할 수 있기 때문이다.

 

또한 내 생각에는 협업에 있어서 굳이 내가 해결할 수 있는 문제를 백엔드 개발자에게 일을 떠넘길 필요도 없다고 생각한다.

 

그렇다면 내가 해결할 수 있는 방법은 무엇일까?

 

바로 웹팩의 devServer를 이용하는 것이다. 웹팩 devServer는 개발 환경에서 사용하기 적합한 가벼운 웹 서버이다. 이 서버를 사용하면 개발중인 어플리케이션을 자동으로 빌드하고, 수정사항을 바로 적용해 줄 수 있을 뿐 아니라 CORS문제 해결을 위한 프록시 설정을 쉽게 할 수 있다.

 

devServer: {
  proxy: {
    '/api/': {
      target: '서버주소 입력',   //여기는 서버 주소를 입력한다.
      changeOrigin: true,
    }
  }
}

webpack의 config 파일에 위 코드블록의 내용을 입력하면 프록시서버 설정이 된다.

이렇게 하면 /api/ 로 보내는 요청은 target에 써있는 주소가 보내는 것처럼 보내게 된다.

(/api/로 시작하는 요청을 서버 주소로 프록시 하는 것)

 

 

---

***주의사항

프록시 서버를 설정해두었다면 axios 요청을 보낼때에 앞의 백엔드 서버 주소를 빼고 /api/~~~ 이런식으로 보내야한다.

 axios.post('/api/users', {payload})

만약 /api/로 시작하지 않고 서버주소를 그대로 기입하게 되면 나의 로컬서버 주소로 백엔드 서버에 요청을 보내게 되므로 CORS가 발생한다. 위처럼 설정해두는 것이 좋다.

 

---

CRA (Create-React-App)로 프로젝트를 구성한 경우

 

CRA로 프로젝트를 구성하면 직접 webpack등의 설정을 하지 않기 때문에 webpack.config파일이 보이지 않는다.

그래서 찾아본 결과 package.json 파일에 아래와 같이 기입하면 된다고 한다.

  "proxy": "http://localhost:4000",   //해당 도메인은 서버도메인이라고 생각하면 된다.

 

만약 이 설정을 하고 오류가 발생한다면 아래 CRA 공식문서에 해결 방법이 있으니 참고하여 해결하시면 됩니다.

 

https://create-react-app.dev/docs/proxying-api-requests-in-development/

Proxying API Requests in Development | Create React App