React CORS에러 클라이언트에서 해결하기, proxy 2개 설정하기

CORS는 다른 출처의 리소스를 사용할 수 있도록 해주는 정책이다. 출처란 scheme(프로토콜), 호스트(도메인), 포트로 정의된다. 같은 출처에서 요청하고 응답을 해야 하는데 그렇지 않은 경우 CORS에러가 발생하고 proxy설정을 해줌으로써 해결할 수 있다.

CORS에러는 브라우저가 기본적으롤 동일출처정책 SOP을 가지기 때문에 브라우저 단에서 뱉는 오류이다. proxy를 두면 proxy가 중간에서 대리인 역할을 하여 요청과 응답을 탈취하여 처리하기 때문에 브라우저를 속인다고 할 수 있다.

 

1. package.json에 proxy 추가하기

Webpack dev server에서 제공하는 기능이다.

CORS에러가 떴다. 응답받을 서버 주소와 내가 요청하는 로컬호스트의 출처가 서로 달라서 생긴 문제이다. 프록시서버를 두어 프록시가 요청하고 프록시가 응답해주도록 한다.

 

  // package.json
  { 
  
  "proxy": "https://api.gptea-test.keenranger.dev", // 서버 주소
  
  }

package.json에 "proxy"를 서버 주소로 입력해서 저장을 하고,
fetch할 때 url은 엔드포인트를 써준다.

 

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

 

2. proxy 2개 이상 설정하고 싶은 경우 http-proxy-middleware 사용하기

1번 방법으로 전역적인 설정이 아닌, 수동으로 추가 설정할 수 있다.

npm install http-proxy-middleware

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    createProxyMiddleware('/oauth2.0', { // 사용할 엔드포인트
      target: 'https://nid.naver.com', // 요청할 서버 주소
      changeOrigin: true, // 호스트가 헤더 변경 가능 옵션
    })
  );
};

그리고 서버를 재시작해주어야 정상적으로 동작한다!!

 

참고 https://velog.io/@realzu/%EC%97%AC%EB%9F%AC-proxy-%EC%84%A4%EC%A0%95-%EC%9C%84%ED%95%9C-CORS-%EC%97%90%EB%9F%AC%ED%95%B4%EA%B2%B0