교차 출처 리소스 공유(Cross-Origin Resource Sharing)
추가 HTTP 헤더를 사용, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
한 객체에 대한 기본 작업을 가로채고 재정의
React 라이브러리, 혹은 Webpack Dev SErver에서 제공하는 proxy 기능 사용해 CORS 정책 우회 가능
webpack dev server에서 제공하는 proxy 기능
브라우저 API 요청 시 백엔드 서버에 직접 요청하는 것이 아니라, 현재 개발 서버의 주소로 우회 요청. 개발 서버에서 해당 요청을 받아 백엔드 서버로 전달해 백엔드 서버가 응답한 내용을 반환.
해당 proxy는 전역적인 설정
// package.json
...
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy" : "http://localhost:3080"//우회할 API 주소
}
기존의 fetch, 혹은 axios 를 통해 요청하던 부분에서 도메인 부분 제거
export const getAllBooks = async () => {
const response = await fetch('http://localhost:3080/api/books');
return await response.json();
}
// 아래로 변경
export const getAllBooks = async () => {
const response = await fetch('/api/books');
return await response.json();
}
http-proxy-middleware
설치
npm install http-proxy-middleware
사용
React App의 src 폴더 안에 'setupProxy.js' 파일 생성
// setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api', //proxy가 필요한 path prameter를 입력
createProxyMiddleware({
target: 'http://localhost:3080', //타겟이 되는 api url
changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분
})
);
};
fetch, 혹은 axios를 사용해 요청하던 부분은 webpack dev server의 proxy 기능을 사용할 때와 동일
export const getAllBooks = async () => {
const response = await fetch('http://localhost:3080/api/books');
return await response.json();
}
// 아래로 변경
export const getAllBooks = async () => {
const response = await fetch('/api/books');
return await response.json();
}