Next.js의 api ruoter로 cors우회하기1

프론트에서 api요청을 보낼때 cors error가 올때가 있다 이때 리버스 프록시를 통해 우회를 하게 되는데 next.js의 api router를 사용하여 우회해 보겠다. 

 

먼저 url을 바꾸는데 axios instance를 이용하여 axios를 사용했기 때문에 base url만 바꿔주면 된다. 

 

다음으로 page폴더 안에엤는 api폴더에 파일을 만든다. 

우리는 외부서버에 api요청을 직접적으로 사용하지 않고 api router를 거쳐 외부서버에 요청하기 때문에 다양한 api router를 만들어 api요청을 하는것이 아닌 하나의 파일에서 모든 요청을 동적으로 처리해야 한다. 그러므로 [...]와 같은 구조분해할당으로 파일이름을 만든다. 

server-request폴더안에 [...server-request].ts파일이 우리가 사용할 api router이다.

 

[...server-request].ts라고 이름을 지은 이유는 next.js에서 파일 라우팅을 할 때 [...]로 되어있는 파일은 Dynamic Routes 라고 해서 여러개의 파라미터를 사용할 수 있도록 한다. 

 

api router로 api요청을 보낼 때 url형식은 이렇다.

axios.get('api.server-request/')

이런식으로 server-request라는 파일에 api요청을 보낼 수가 있다. 

 

[...]를 사용하여 파일이름을 지정하면 이런식으로 사용할 수 있다. 

axios.get('api.server-request/내가 쓰고싶은 파라미터1/내가 쓰고싶은 파라미터2/')

지정된 경로뒤에 다른 파라미터를 임의로 사용할 수 있다. 

 

뒤에쓰는 파라미터로 외부서버에 어떤 api요청을 보낼지 알려줄 수 있다. 

 

body에 넣지 않고 이렇게 복잡하게 한 이유는?

get요청은 body를 보낼 수 없다그래서 url로 보낸다.

 

클라이언트의 코드를 보면 다음과 같다. 

 

axios instance

const locationURL =
  typeof window !== 'undefined'
    ? `${window.location.origin}/api/server-request/`
    : `${process.env.NEXT_PUBLIC_API_ROUTE_BASE_URL}api/server-request/`;
    
export const axiosValid_API = axios.create({
  baseURL: locationURL,
});

삼항연산자로 사용한 이유는 먼저 window.location.origin은 현재 url을 가저오는 코드 인데 next.js는 ssr때문에 window객제가 불러오기 이전 서버에서 렌더링을 진행한다. 이때 해당 코드가 실행되면 undefind가 뜨기때문에 window객체가 있을때는 window.location.origin로 하고 없을 때는 .env에 작성한 url을 불러오도록 하였다. 

 

api함수

export const addScheduleAPI = async () => {
  try {
    const { data } = await axiosValid_API.get('schedule');
    return data;
  } catch (error) {
    throw error;
  }
};

 

처음부터 .env에서 불러오지 않고 복잡하게 window.location.origin 를 쓴 이유는?

모종의 이유로 도매인이 변경되었을때 .env를 변경하지 않았다면 에러가 나기때문에 하드코딩을 지양한다. 그러므로 window.location.origin을 사용하였다.