백엔드와 프론트가 분리된 환경일 때 CORS 문제 해결하기 - 방법3) 프론트엔드(React)에서 직접 해결

아래 링크 "백엔드와 프론트가 분리된 환경일 때 CORS 문제 해결하기"의 세번째 방법이다.

https://annyeong46.tistory.com/69

백엔드와 프론트가 분리된 환경일 때 CORS 문제 해결하기 - Nginx 이용

 

---

 

프론트엔드(React)에서 직접 해결하기

이 방법을 권장하지는 않는다. 임시방편인 해결법이다.

(더 안전하고 좋은 방법은 해당 링크를 참고하자. https://annyeong46.tistory.com/69)

 

권장하지 않는 이유는

프론트에서 CORS 문제를 해결한다고 해도 브라우저 상에서만 적용되기 때문이다. 따라서 브라우저가 아닌 다른 클라이언트(ex. 모바일 앱, Postman 등)에서는 여전히 해결되지 않는다.

하지만 잠깐 통신 확인을 위해서라면 사용해도 무관하다.

 

 

---

 

 

아래 코드를 터미널에 입력한다.

npm install http-proxy-middleware --save

 

 

그리고 파일을 생성하여 아래 코드를 입력하여 저장한다.

src/setupProxy.js

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

module.exports = function(app){
    app.use(
        createProxyMiddleware({
            target: 'http://localhost:8080',	//서버에서 설정한 URL
            changeOrigin: true,					//호스트 헤더를 target URL로 변경
            pathFilter : '/api',				//적용할 경로 (주석 처리시 모든 경로에 적용됨)
        }),
    );
};

 

 

이렇게만 하면 웹브라우저 상의 CORS는 해결된다.