[React] CORS 에러

---

POSTMAN으로 GET 요청 해보면 아주 잘 받아와 지지만 어째서인지 리액트 프로젝트 할 때, CORS 에러가 자주 발생한다.

오류의 이유, 현재 내 개발서버는 http://localhost:3000/ 이지만, 다른 리소스에게 http 요청을 보내려고 하니 나타나는 이슈.

오픈 api를 이용할 때에 프록시를 사용하지 않고 서버로 요청 할 경우 웹에서 CORS 에러를 뿜어낸다.

시도했던 방법
1. package.json에 "proxy" : "주소" 삽입하기
개발을 한창 할때 이 방법을 사용하니 잘 불러와졌지만, 왜인지 다음날 다시 개발하려고 앱을 여니

앱이 실행조차 되지 않고 위의 오류를 뿜어 대더라. 🤬

블로그 찾아보니 package.json의 "proxy" 부분을 삭제하면 실행된다는데,,, 그럼 내 목적은... ... 그냥 다른 방법으로 proxy에 접근 하기로 했다.

http-proxy-middleware

npm i http-proxy-middleware

앱 내에 http-proxy-middleware 설치

/* src 폴더 내에 setupProxy.js 파일 생성 */

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

module.exports = function(app){
    app.use(
        '/api',
        createProxyMiddleware({
            target : 'API를 요청할 서버 주소',
            changeOrigin: true, /*대상 서버 구성에 따라 호스트 헤더가 변경되도록
설정해 줌*/
        })
    )
}

http-proxy-middleware에 대한 자세한 옵션 등의 설명
Git - http-proxy-middleware

다신 보지 말자 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ