[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

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F#cors_%EC%97%90%EB%9F%AC_%ED%95%9C%EB%B0%A9_%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0