[React] CORS 오류 해결하기
위와 같은 에러는 우리가 API 호출을 하다보면 종종 접하게 되는 에러입니다.
클라이언트의 주소와 API 요청하는 주소의 오리진이 달라서 발생합니다.
React를 사용한다면 npm을 다운로드 받아서 해결할 수 있습니다.
1. http-proxy-middleware 패키지 다운로드
yarn add http-proxy-middleware
2. setupProxy.js 파일 생성
반드시 src 폴더의 바로 아래에 setupProxy.js을 생성하여야 합니다.
그래야지만 프록시 설정을 인식할 수 있습니다.
이제 setupProxy.js에 다음의 코드를 삽입합니다.
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
'/api',
createProxyMiddleware({
target: '<< 요청할 API 주소 >>',
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
})
)
}
여기서 pathRewrite는 우리가 /api
로 시작하는 uri로 요청을 하면 자동으로 target에 넣는 주소로 변환하여 요청을 보내게 됩니다.
만약, target이
www.google.com
이라면, 우리가fetch('/api/search')
로 요청을 보내면 실제로는www.google.com/search
로 요청을 보내게 됩니다.
3. /api을 붙여서 요청
이제 기존에 fetch나 axios 등으로 API 요청을 하듯이 요청을 보내면 됩니다.
앞서, 말했듯이 주의할 점은 기존의 uri 앞에 /api
을 붙여주어야 한다는 것입니다.
저의 경우에는 다음과 같이 요청을 보냈습니다.
import axios from 'axios'
const api = axios.create({
baseURL: '/api',
headers: {
...
},
})
export const get = async (id: number) =>
await api.get(`/contents/${id}`).then(({ data }) => data)
- 반드시
/api
으로 할 필요는 없습니다. 범용적으로 사용하기에 여기서도 한 것 뿐이므로 정책이나 요구사항에 맞게/api
부분을 변경하면 됩니다.- 주의할 점은 setupProxy.js의
/api
부분과 baseUrl의/api
부분은 반드시 동일해야 합니다.
4. React 재시작
우리가 http-proxy-middleware
을 설치하여 setupProxy.js에서 건드는 app은 결국 서버를 의미합니다.
우리는 패키지를 통해 서버에서 필요한 부분만을 간단하게 조작하는 셈이 됩니다.
결국, 서버의 일정 부분을 변경하는 것은 같으므로 반드시 설정 후 재시작 해주어야 변경사항이 반영됩니다.
ctrl + c
를 눌러서 React를 종료시켰다가 npm run start
나 yarn start
로 React를 다시 실행해줍니다.
여기까지 왔다면 이제 CORS 에러 대신 정상적으로 응답을 받을 수 있게 됩니다!
옵션. Netlify 배포시 Proxy 적용하기
http-proxy-middleware
은 로컬 모드로 개발시에는 잘 요청/응답이 되더라도 배포할 때에는 CORS 에러를 마주하게 됩니다.
만약, netlify로 배포를 한다면 간단하게 설정을 추가해줄 수 있습니다.
root 위치에 netlify.toml
파일을 생성합니다.
[[redirects]]
from = "/api/*"
to = "<< API 요청할 주소>> /:splat"
status = 200
위의 코드를 추가합니다.
앞에서 우리는 /api
로 구분했기에 여기서도 /api/*
이 됩니다.
반드시 API 요청할 주소 뒤에 /:splat
을 넣어주어야 합니다.
:splat
은*
과 같은 의미입니다.
이제, netlify로 배포 후에도 정상적으로 요청/응답이 되는 것을 볼 수 있습니다.
Author And Source
이 문제에 관하여([React] CORS 오류 해결하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dkdlel102/React-CORS-오류-해결하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)