[Next.js] rewrites로 CORS 해결하기
CORS 에러 발생
오늘도 어김없이 CORS에러가 나를 찾아왔다..ㅎㅎ
에러의 원인
http://localhost:3000(프론트)에서 https://www.test.co.kr(백앤드)로 요청을 날려
서로 다른 Origin이기 때문에 브라우저에서 SOP(동일 출처 정책)에 의하여 차단한 것이다
axios.get('https://www.test.co.kr/api/item/diver.gate.php', {
params: {
searchType: 'REVIEW',
sortOption: 'UPDATE',
caType: 1,
displaySize: 10,
},
})
CORS란?
CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유 정책이다
기본적으로 브라우저가 보안을 위해서 SOP(Same-Origin Policy), 즉 동일 출처 정책을 따른다.
하지만 다른 출처의 리소스라고 무조건 막을 수는 없기 때문에 필요한 게 CORS 정책이다.
CORS 정책을 잘 지킨다면 다른 출처의 리소스도 허용이 된다
CORS 해결방법
1. proxy 서버 사용하기
2. 백앤드에서 Access-Control-Allow-Origin Header 설정하기
등이 있다!
나는 지금 Next.js 프로젝트를 진행하고 있고 Next.js를 서버를 갖고 있지 않은가?! 해서 검색을 해보니
rewrites를 이용해 url proxy역할을 할 수 있다고 한다
rewrites
1. next.config.js에 아래 소스를 추가해준다
rewrites를 사용하면
실제 요청은 destination으로 가지만 브라우저에서는 source로 요청이 간 것처럼 보인다
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
async rewrites() {
return [
{
source: '/test/:path*',
destination: 'https://www.test.co.kr/:path*',
},
]
},
}
module.exports = nextConfig
2. api 요청을 아래처럼 변경해 준다
axios.get('/test/api/item/diver.gate.php', {
params: {
searchType: 'REVIEW',
sortOption: 'UPDATE',
caType: 1,
displaySize: 10,
},
})
3. 서버를 다시 재실행(npm run dev)한다
Network창을 확인해 보면
성공이다 👍
Request URL을 확인해 보면 http://localhost:3000으로 요청이 보내진 걸 알 수 있다
rewrites와 redirects의 차이
공식문서에서 비슷해 보이는 두 기능이 있어
차이점을 정리하면
rewrites는 보이는 url은 그대로이나 실제 요청은 destination으로 가고
redirects는 보이는 url 자체가 destination으로 가는 것이다
예를 들어
www.sollogging.com/old-about로 진입 시 www.sollogging.com/about를 보여주고 싶다 했을 때
rewrites는 www.sollogging.com/old-about를 보여주나 실제로는 www.sollogging.com/about에 있고
redirects는 www.sollogging.com/about로 이동된다!
참고자료 - https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites
next.config.js Options: rewrites | Next.js
Add rewrites to your Next.js app.
nextjs.org