(블로깅) CORS 에러 해결과 Proxy

JulyK9·2022년 10월 13일

개발자가 되기 위한 여정

목록 보기

32/35

CORS에러 해결(?)

1. pre-flight로 OPTIONS 메서드를 통해 백엔드에 접근권한을 요청하여 서버측에서 CORS 설정해주면 그것을 근거로 접근할 수 있게됨 (정석)

2. CORS 정책을 해결한다기보다.. 우회하는 방법이 바로 Proxy

별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 API 요청을 (브라우저를 거치지 않고) 백엔드로 전달

백엔드 서버는 응답을 React 앱으로 보내주게 되고

React 앱은 서버로부터 받은 응답 데이터를 다시 브라우저로 전달함

이런 과정을 통해 브라우저는 동일 출처로 인식하게 되고 CORS 정책을 위반한지 모르기 때문에 에러가 안남 (즉, 브라우저를 proxy 기능으로 속이는 것)

(궁금증)
=> 음, 해결이라기보다 정식으로 협조가 되서 사용하는 부분이 아니라면.. 연습이나 개인적인 사용을 할 때는 모르겠는데 비즈니스 상에서 활용하기엔 검토가 필요할 거 같은데..
=> 그러면 cors 정책을 이런 방식으로 모두 회피해서 이용할 수 있는건가?(cors 정책 무용?)

Proxy 사용법

방법1 : webpack dev server proxy

원래 웹팩 설정을 통해서 적용하지만
CRA로 만든 React 프로젝트 에서는 package.json 에서 proxy 값을 설정하여 적용

< 클라이언트 단의 package.json >

...
"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
	"proxy" : "우회할 API 주소"
}

(중요) 추가 확인 및 에러 해결사항!
package.json 에 proxy 부분 작성 해준후 ⇒ 꼭! 다시 npm install 을 해줘야 module에 반영됨!!! 이걸 안해서 계속 콘솔창에 에러남 ㅠ
에러 메시지: Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON in React

그 다음은 기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거

// 적용 전
export async function getAllfetch() {

    const response = await fetch('우회할 api주소/params');
    .then(() => {
			...
		})
}

// 적용 후
export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}

방법2 : React Proxy

webpack dev server 에서 제공하는 proxy는 전역적인 설정이기 때문에,
종종 충분히 적용되지 않는 경우가 생기기도 한다고 함.
이때 http-proxy-middleware 라이브러리를 사용해보자!

클라이언트쪽 터미널에서 http-proxy-middleware 라이브러리 설치

npm install http-proxy-middleware --save

React App의 src 파일 안에서 setupProxy.js 파일을 생성하고,
설치한 라이브러리 파일을 불러온 다음 아래와 같이 작성

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

module.exports = function(app) {
  app.use(
    '/api', //proxy가 필요한 path prameter를 입력
    createProxyMiddleware({
      target: 'http://localhost:5000', //타겟이 되는 api url를 입력
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분
    })
  );
};

fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거

// 적용 전
export async function getAllfetch() {

    const response = await fetch('우회할 api주소/params');
    .then(() => {
			...
		})
}

// 적용 후
export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}

레퍼런스

리액트 환경에서의 멀티 프록시 구현: https://third9.github.io/posts/multi-proxy_of_react/
package.json 에서 멀티 프록시 설정: https://biio-studying.tistory.com/238
리액트에서 프록시 여러 개 설정하는 방법 : https://serendipity24.tistory.com/264

JulyK9

느리지만 꾸준하게. 부족하거나 잘못된 부분은 알려주시면 감사하겠습니다.