[React] 프론트엔드에서 CORS 에러 해결하기(Proxy 이용)

💛 문제점

---

역시나 API 통신을 하려고 하니 프론트쪽에서 cors 에러가 났습니다~~🤦‍♀️

제가 이전에 토이 프로젝트들을 진행했을 때는 프론트엔드와 백엔드를 제가 구현했기 때문에 백엔드쪽에서 CORS 에러를 해결했었습니다. 백엔드에서 CORS 에러를 해결하는 게 정석이긴 합니다... !

하지만 이번에는 백엔드는 다른 분이 작업하고 저는 프론트만 작업하기 때문에..!!!

제가 해결할 수가 없는 상황이었습니다.

 

백엔드쪽에서 이 문제를 해결하기 전에 빨리 API 통신을 해보고 싶었기 때문에ㅠㅠ

이번에는 프론트에서 CORS 에러를 해결하는 방법에 대해서 알아보았습니다~~

 

---

💛 해결 방법

Proxy 이용하기

1. 우선 npm을 이용해서 http-proxy-middleware를 설치해줍니다.

$ npm install http-proxy-middleware --save

 

2. src폴더 안에 setupProxy.js 파일을 만들어주고 다음과 같이 적어줍니다.

/* setupProxy.js */

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
    app.use(
      "/api",
      createProxyMiddleware({
        target: "http://localhost:8080",
        changeOrigin: true
      })
    )
}

이렇게 만들어놓으면 API를 이용할 때 'http://localhost:8080/api/... ' 이런 방식으로 이용하실 수 있습니다.

 

그래도 혹시 모르니깐 어떻게 api를 구성했는지 보여드리겠습니다!

저는 이렇게 Axios 인스턴스를 만들어놓고 기본이 되는 url쪽에만 /api를 추가해주었습니다.

const BASE_URL = 'http://localhost:8080/api';

const defaultApi = axios.create({
    baseURL: BASE_URL,
    headers: { "Content-Type": 'application/json' }
})

 

프론트에서 위와 같이 구성을 하고 통신을 해보았는데요.

하지만 문제가 하나 더 있었습니다. 흑흑.. 백엔드에 이 api 주소가 존재하지를 않는다고 에러가 생긴 것인데요.

이 문제는 백엔드쪽 API 주소에서 앞부분에 /api를 추가해주었더니 해결이 되었습니당!!

결국.. 백엔드쪽에서도 수정을 해버렸네욥....

 

 

그렇긴 해도 프론트에서 CORS 에러 해결하는 방법을 알게 되어서 좋았습니다!!😺😺🧡

다음에 협업으로 프로젝트할 때 이런 문제가 또 생긴다면 쉽게 해결할 수 있을 것 같네요~~