CORS는 Cross-Origin Resource Sharing
의 줄임말로, 한국어로 직역하면 교차 출처 리소스 공유라고 해석할 수 있다.
출처(Origin)
는 Protocol
, Host
, Port
를 모두 합친 것을 의미한다.
ex) https://www.github.com:443
출처의 구분은 두 URL 의 구성 요소들 중에서 Scheme
, Host
, Port
이 3가지만 동일하면 된다.
같은맥락으로, 서버 개발자분이 주소를 허용해줬으나 내가 개발하는 환경은 localhost
라면 당연히 CORS 에러가 나게 되는 것이다.
서버 개발자분이 access-control-allow-origin
을 * 해준다면 상관없으나, 여러가지 이유로 불가능하다.
나는 Next.js 를 사용하고 있으므로, Next.js 에서 이슈를 해결하려면 React 와는 조금 다르다.
React 는 webpack 에서 proxy 처리를 하고, Next.js 는 next.config 에서 proxy 처리를 한다.
코드는 비슷하다.
const nextConfig = {
reactStrictMode: true,
async rewrites() {
return [
{
source: '/:path*',
destination: `전달받은 API 주소/:path*`,
},
];
},
};
module.exports = nextConfig;
이후 axios 로 호출할때는, 앞의 전체 주소를 사용할 필요 없이 API 주소 뒷부분 경로부터 쓰면 된다!
...
// const URL = `http://sample.com:1234/api/post` <- 이렇게 안써도 됨.
const URL = `/api/post`
await axios.get(URL).then(res => console.log('data: ', res.data))