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

지난번 포스팅에서는 api router로 우회할 때 기존에 서버로 직접 api 요청을 보내는것을 다른 개발자들이 불편하지 않고 수청을 최대한 덜 하도록 axios instance를 변경하였고 api router에 여러개의 파라미터를 넣기 위해 [...]으로 파일이름을 정하는것까지 포스팅 하였다

 

오늘은 api router안에서 어떤식으로 코드를 작성하였는지 포스팅 하도록 하겠다. 

 

[...server-request].ts 파일 세팅

먼저 api router 파일을 만든다. 

import { NextApiRequest, NextApiResponse } from 'next';

export default async function serverRequest(req: NextApiRequest, res: NextApiResponse) {
  try {
    res.status(200).send(response.data);
  } catch (error) {
    console.log(error);
    res.status(error.response.data.statusCode).send(error.response.data);
  }
}

api/server-request경로로 api요청이 들어오면 위 함수가 실행된다

 

매개변수로 req와 res를 받는데 req는 api요청시 같이 보내지는 data를 의미하고 res는 다시 프론트로 보내줄때 쓰는 매개변수이다.

 

res.status(200).send('요청 성공');는 해당 요청이 정상적으로 처리되었을때 서용하는 코드이고

res.status(500).send('서버 오류가 발생했습니다.');는 해당함수에서 무었인가 오류가 났을 때 사용되는 코드이다. 

 

status() 는 상태코드이고 send()는 응답을 보내는 매개변수이다. 

 

request 추출하기

request시 같이 온 body와 method 등 필요한 값들을 변수로 담아둔다.

 

  const body = req.body;
  const method = req.method;
  const session = await getToken({ req });
  const urlInQueryString = req.url?.replace('/api/server-request/', '') as string;
  const url = urlInQueryString.substring(0, urlInQueryString.indexOf('?', 0));
  const { isNotHeader, dataType, isImage } = req.query as { isNotHeader: string; dataType: string; isImage: string };

body는 post나 put, patch요청시 같이 보낸 body값이다.

method는 api요청시 보내는 method이다.

url은 api요청시 작성한 url파라미터를 의미한다. 먼저 api/server-request는 api rotuer로 request보내기 위한 경로이기때문에 문자열 제거 매서드로 제거하고 ?뒤부터는 query string 이기에 제거한다. 

 

axios로 외부서버에 요청보내기

모든 준비가 되었으면 axios를 통해 외부서버로 api요청을 보낸다. 

보통 axios.get()이나 axios.post()처럼 api요청을 할 수 있지만 axios([])로 객체를 인수로 집어넣어 처리할 수도 있다. 

 const config = {
      method,
      url: `${process.env.NEXT_PUBLIC_SERVER_BASE_URL}${url ? url : urlInQueryString}`,
      headers: {
        Authorization: `Bearer ${session?.accessToken}`,
        refreshToken: `${session?.refreshToken}`,
      },
      data: body,
    };
    const { data, ...getConfig } = config;
    const result = !body || method === 'GET' || method === 'DELETE' ? getConfig : config;
    const response = await axios(result);

 

method는 프론트에서 보낼때 사용하는 method로 작성하고 url은 실제로 외부서버에 보낼 url을 입력한다. 

.env에 저장한 외부서버url에 위에 변수로 만들어놓은 url을 업력한다. url이 undefind일 수도 있기 때문에 urlQueryString을삼항연산자로 입력한다. 

header에는 accessToden과 refreshToken을 녛고 data는 body값을 넣는다. 

그다음 get, delete는 body값이 없기 때문에 config객체에 data를 제거한 다른 객체를 변수로 만들고 body가 없거나 method가 get이나 delete면 기존 data를 제거한 config객체를,아니면 기존 config객체를 axios객체에 넣어서 api요청을 한다. 

이렇게 axios요청이 성공적으로 마치면 

res.status(200),send(responce.data)를 통해 다시 프론트로 보내준다.