[React] 리액트 CORS 이슈 관련 해결법

통상 리액트 자체서버 포트는 3000 이라 다른 포트 (ex. 백엔드) 에서 값 전달하려고하면 CORS 이슈가 발생한다.

그때 해결할수있는 방안으로는

 

package.json 추가

"proxy": "http://localhost:8080",

 

---

createProxyMiddleware 이용

 

yarn add http-proxy-middleware

 

리액트 프로젝트 src 폴더 내에 setupProxy.js 생성 후 아래처럼 기재

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
    app.use(createProxyMiddleware('/api', {
        target: 'https://APIURL.co.kr/RestApi/',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
    })
    );
}

 

위 처럼 생성하고나면 axios 등으로 url 을 호출할때 target 부분은 제외하고 선언해도 된다.

...생략

const [id, setId] = useState("");
const [pwd, setPwd] = useState("");

let user = {
  id,
  pwd
}

axios.post(`/api/id=test&pwd=1111`)
.then(response => {
  console.log("성공");
  //console.log(response.data);
}).catch(error => {
  console.log("실패");
  console.log(error);
})

...생략

 

테스트를 하다보니 소스가 변경되고나서 저장되면 바로바로 화면에 나타나는것과 달리 setupProxy.js 파일 경우엔

서버를 재시작해야 적용되는것을 확인 할 수 있었다.