CORS에러 회피를 위한 api우회 방법

서론

next.js는 react를 기반으로한 프레임워크 이며 react는 js기반 라이브러이 이다.
결국 클라이언트 언어인 next.js는 api를 기반으로 서버와 통신을 할 때 cors에러가 발생할 수 있다.

그렇기에 app/api 경로를 활용하여 client component에서 next/server로 통신을 하고
next/server에서 backend server로 통신을 진행하여 cors에러가 안 나게끔 해 줘야한다.

CORS

Cross-Origin Resource Sharing의 약자이다. 브라우저에서 다른 출처의 리소스를 공유하는 방법.

CORS 동작방식

기본적으로 웹 클라이언트 어플리케이션이 다른 출처의 리소스를 요청할 때는 HTTP 프로토콜을 사용하여 요청을 보내게 되는데, 이때 브라우저는 요청 헤더에 Origin이라는 필드에 요청을 보내는 출처를 함께 담아보낸다.

Origin: https://notion.so

이후 서버가 이 요청에 대한 응답을 할 때 응답 헤더의 Access-Control-Allow-Origin 이라는 값에 “이 리소스를 접근하는 것이 허용된 출처”를 내려주고, 이후 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교해본 후 이 응답이 유효한 응답인지 아닌지를 결정한다.

기본적인 흐름은 이렇게 간단하지만, 사실 CORS가 동작하는 방식은 한 가지가 아니라 세 가지의 시나리오에 따라 변경되기 때문에 여러분의 요청이 어떤 시나리오에 해당되는지 잘 파악한다면 CORS 정책 위반으로 인한 에러를 고치는 것이 한결 쉬울 것이다.

출처:https://velog.io/@hoo00nn/CORSCross-Origin-Resource-Sharing-란

Next.js에서의 우회

서론에서 설명했듯이 next/server를 통한 우회방법을 설명해보면
보통 우리가 client_component에서 fetch로 데이터를 호출할 때는 다음과 같응 양식을 사용 할 것이다.

await fetch(`${url}`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(body),
});

이 때 url을 api/ 경로로 전달하여

아래와 같이 NextRequest를 받아 처리를 해주면 된다.

import API_CODE from "@/const/api_code";
import BackendFetch from "@/util/backfetch";
import { NextRequest, NextResponse } from "next/server";

export const POST = async (req: NextRequest) => {
  try {
    const { nextResponse }: any = await BackendFetch(req);

    return nextResponse;
  } catch (error) {
    return NextResponse.json(API_CODE[9000]);
  }
};