Porxy - CORS 에러 해결 알아보기

조성원·2023년 6월 7일
0

CORS 에러

많은 사람들이 알겠지만 CORS 에러의 근본적인 오류는 "같은 도메인으로부터 요청"을 하지 않았기 때문이다.

근데 왜 같은 도메인으로부터 요청을 해야하는 걸까?
그 답은 다음 포스트를 보는 것이 더 좋은 설명이 될 것이다
MDN- 교차 출처 리소스 공유 (CORS)
Medium - Let’s Talk About CORS

근데 개발을 하다보면 react server에서 db server로 요청을 해야하는데 같은 도메인을 공유하지 않기에 요청을 하면 CORS에러가 뜸
그러면 CORS에러를 어떻게 해결??????

CORS 에러 해결하기

해결방법: proxy 이용하기

Proxy? 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램 (위키피디아 - 프록시 서버)

얻는 장점?

proxy를 사용하면 다른 도메인으로 요청/응답을 할 수 있으며
앞에 주소 없이 상대경로만으로 백앤드 서버에 접속할 수 있음(한 곳에서 관리하기에 나중에 수정이 필요할 때 여러 곳에서 수정할 필요없이 한 파일에서 바로 수정할 수 있음)
첫 번째 방법: package.json에 proxy값 넣기
package.json에서 가장 최하단에 아래와 같이 설정

....
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy" : "우회할 API 주소"
}
fetch 또는 axios 요청에 원래 있던 도메인 부분 삭제
// 원본
	const response = await fetch('우회할 api주소/params');
    .then(() => {
// 변경
	const response = await fetch('/params');
    .then(() => {
두 번쨰 방법: React Proxy 사용하기
npm install http-proxy-middleware --save로 middleware 설치
src 파일에서 setupProxy.js를 생성하고 아래와 같이 작성
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/proxy가 필요한 path prameter',
    createProxyMiddleware({
      target: '타겟이 되는 api url', 
      changeOrigin: true,
    })
  );
};

// 또는 받아야할 도메인이 2개 이상이면
 app.use(
    ['/path prameter1', '/path prameter2'], // 배열로 생성
    createProxyMiddleware({
      target: '기본적으로 target되는 api url', // 기본적으로 target되는
      changeOrigin: true,
      router: {
        '/path prameter2' : '추가 api url'
        // '/api3' : 도메인으로 추가할 수 있음
      }
    })
  );
fetch 또는 axios 요청에 원래 있던 도메인 부분 삭제
// 원본
	const response = await fetch('우회할 api주소/params');
    .then(() => {
// 변경
	const response = await fetch('/params');
    .then(() => {
    ```
profile
IT 트렌드에 관심이 많은 프론트엔드 개발자

0개의 댓글