CORS 에러가 발생하는 이유
웹 콘텐츠의 출처(origin)는 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의됩니다. 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가졌다고 말합니다.
해당 출처가 일치하지 않을때 브라우저에서 CORS 에러가 발생합니다.
CORS 에러를 해결하는 방법
React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 proxy 기능을 사용하면 CORS 정책을 우회할 수 있습니다.
proxy 기능
원래라면 브라우저에서 backend에게 접근권한을 확인 받아야하지만
proxy를 사용하면 클라이언트에서 backend로 직접 접근권한을 확인 받아 브라우저에게 전달하기때문에 브라우저는 해당 사실을 눈치채지 못하고 cors 에러가 발생할 상황을 피할 수 있습니다.
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" : "우회할 API 주소"
}그리고 api 요청하는 부분에서 도메인 부분을 제거합니다.
export async function getAllfetch() {
const response = await fetch('우회할 api주소/params');
.then(() => {
...
})
}
export async function getAllfetch() {
const response = await fetch('/params');
.then(() => {
...
})
}React Proxy 사용법
webpack dev server 에서 제공하는 proxy는 전역적인 설정이기 때문에, 종종 해당 방법이 충분히 적용되지 않는 경우가 생기기도 합니다. 그래서 수동으로 proxy를 적용해줘야 하는 경우가 있는데, 이때는 http-proxy-middleware 라이브러리를 사용해야 합니다.
http-proxy-middleware 라이브러리 설치
npm install http-proxy-middleware --save
그리고 React App의 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 url를 입력합니다.
changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
})
);
};만약 path parameter가 여러개라면 아래 방법을 확인 해주세요
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
// auth 포함 하위 route에 대해서는 localhost:5000/v1을 domain으로 하여 proxy설정
app.use(
'/local',
createProxyMiddleware({
target: 'http://local.test.com',
changeOrigin: true,
}))
// dummy 포함 하위 route에 대해서는 localhost:6000/v1을 domain으로 하여 proxy설정
app.use(
'/remote',
createProxyMiddleware({
target: 'http://remote.test.com',
changeOrigin: true,
})
}이후에는 proxy를 통한 우회를 사용했을때와 마찬가지로 api 요청하는 부분에서 도메인 부분을 제거합니다.
export async function getAllfetch() {
const response = await fetch('우회할 api주소/params');
.then(() => {
...
})
}
export async function getAllfetch() {
const response = await fetch('/params');
.then(() => {
...
})
}위에 두가지 방법이 클라이언트에서 CORS를 피할 수 있는 방법이고 이래도 해결이 안된다면 기본적으로는 백엔드 개발자한테 요청을 해야합니다.
