반응형
toy project로 단순 게시판을 구현해보고 있다.
(view - react + typescript, server - spring + jpa)
개발을 하다보면 자주 보이는 CORS 이슈.
에러를 그대로 읽어보자면
http://localhost:3000 에서 (origin)
http://localhost:8070/api/product 로 요청한 것이 CORS policy에 의해 막혔다는 말이다.
CORS 이슈를 해결하기 위한 많은 방법이 있지만
이번에는 Proxy 를 이용한 방법을 써보기로 했다.
우선 http-proxy-middleware 를 설치해준다.
$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware
설치가 완료되면
src/setupProxy.js 파일을 생성하여 아래와 같이 작성한다.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api', // 불러오려는 server 의 api path
createProxyMiddleware({
target: 'http://localhost:8070', // server 주소를 넣어주면 된다.
changeOrigin: true,
})
);
};
그리고 view 에서 직접 호출하던 주소를 바꿔준다
// 기존(http://localhost:8070/api/product) -> 수정(/api/product).
_getProduct = async() => {
Axios.get('/api/product', {
}).then((res)=>{
console.log(res)
})
}
잘 불러오는 것을 확인 할 수 있다.
** 참고한 사이트
create-react-app.dev/docs/proxying-api-requests-in-development/
반응형
