react api 호출 시 CORS 에러 해결

참고

https://woochan-dev.tistory.com/94

https://www.datoybi.com/http-proxy-middleware/

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

해결 방법

1. 백엔드 서버에서 응답 보낼 때 헤더에 클라이언트단 origin을 명시해두기 (origin : 프로토콜 + 호스트(도메인) + 포트번호, ex- http://baecoding:5000)

2. 클라이언드단에서 자체적으로 해결 : 프록시 서버 활용

2번 방법 썼음

배포 전 개발 용도로 쓰려는거기도 하고, 아직 프론트 서버를 EC2 인스턴스에 올린 것도 아니라서 그냥 임시방편으로 프록시 서버를 활용하기로 했다.

클라이언트단 자체 해결 2가지 방법

방법 1. react-scripts 에서 제공하는 proxy 활용

package.json에

"proxy":"api 요구할 서버 origin"

추가하기

이 후 fetch문에서 origin 부분은 빼고 작성하면 된다.

ex) http://asd.com/api/course 를 /api/course 로

방법 2. http-proxy-middleware 라이브러리 활용

src 폴더에 setupProxy.js 파일을 만들고 아래와 같은 형식으로 작성하자

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

module.exports = function (app) {
  app.use(
    "/딱히 없을 땐 아무거나", //proxy가 필요한 path parameter
    createProxyMiddleware({
      target:
        "http://ec2-3-34-60-62.ap-northeast-2.compute.amazonaws.com:8081/", //서버 api url
      pathRewrite: {
        "^/위에서 썼던 parameter가 만약 임의로 넣어 쓴거였으면 이걸로 지울 수 있음": "",
      },
      changeOrigin: true, // 서버 구성에 따른 호스트 헤더 변경 여부 설정
    })
  );
};

이 방법이 여러 api 서버를 대상으로 여러 개 설정해둘 수 있어서 좋은 듯 (app.use 여러개 쓰면 됨)