: 클라이언트와 서버 사이에서 대리로 통신을 수행해주는 서버
즉, Proxy 서버는 클라이언트와 서버 사이에서 요청과 응답을 처리해준다.
Proxy를 사용하면 CORS 정책을 우회할 수 있게 된다.
CORS 에러를 해결하는 정석적인 방법은 프론트엔드 개발자가 백엔드 개발자에게 프론트엔드 개발 서버 도메인을 허용 해달라고 요청을 하면,
백엔드 개발자가 응답 헤더에 필요한 값들을 담아서 전달을 해주는 것이다.
➡️ 즉, 개발 과정에서 CORS 에러를 쉽게 해결하기 위해 Proxy를 사용할 수 있다.
CORS(Cross Origin Resources Sharing)
: 교차 출처 리소스 공유
추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 체제
*출처(origin) : URL의 프로토콜, 도메인, 포트
200 OK
응답을 보낸다.webpack dev server에서 제공하는 proxy 기능을 이용할 수 있다.
CRA로 만든 React 프로젝트에서는 package.json
파일에 "proxy"
값을 설정하여, 프록시를 쉽게 설정할 수 있다.
// ...
"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 주소(서버 주소)"
},
// ...
기존의 fetch
/axios
로 요청하는 부분에서 도메인 부분을 제거한다.
export async function getAllFetch() {
const response = await fetch('우회할 API 주소/params');
.then(() => {
...
})
}
⬇️
export async function getAllFetch() {
const response = await fetch('/params'); // 도메인 제거
.then(() => {
...
})
}
http-proxy-middleware 라이브러리를 이용해서 수동으로 proxy를 적용해줄 수도 있다.
npm install http-proxy-middleware
setupProxy.js
파일React 앱의 src
파일 안에 setupProxy.js
파일을 생성하고, 안에서 설치한 라이브러리를 불러온다.
// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api', // proxy가 필요한 path parameter를 입력한다.
createProxyMiddleware({
target: 'http://localhost:5000', // 우회할 API 주소(서버 주소)
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(() => {
...
})
}
// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api1', // 이름이 겹쳐서 api → api1로 변경
createProxyMiddleware({
target: 'http://localhost:3080',
changeOrigin: true,
})
);
app.use(
'/api2',
createProxyMiddleware({
target: 'http://localhost:3070',
changeOrigin: true,
})
);
};
혹은 아래처럼 더 간단하게 작성할 수도 있다.
// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
app.use(
['/api', '/api2'],
createProxyMiddleware({
target: 'http://localhost:3080',
changeOrigin: true,
router: {
'/api2': 'http://localhost:3070'
}
})
);
};