[Next.js] 외부 API 통신 시 CORS 에러 해결

외부 API를 사용해서 상호작용을 해야 할 때 CORS에러가 발생하는 경우가 종종 있다.
CORS에러를 클라이언트 측에서 해결하기는 어렵다.
하지만 Next.js API Routes를 사용하면 브라우저의 정책(Same-Origin Policy)을 우회하여 CORS에러 없이 통신할 수 있다.

방법

클라이언트 측에서 외부 API에 직접 통신을 하면 브라우저 정책에서 CORS가 발생하는 경우가 있는데 일반적으로 서버 to 서버로 통신을 하면 CORS오류가 발생하지 않는다.
때문에 대처 방법으로 Next.js API Routes를 사용해서 외부 API와 통신을 하려고 한다.

만약 밑에 코드 처럼 클라이언트 측에서 외부 API로 직접 통신을 했을 때 CORS에러가 발생했다고 가정을 한다.

const onSubmit = async(e:ChangeEvent<HTMLFormElement>) => {
	e.preventDefault();
  
  	const formData = {
    	name: '홍길동',
      	tel: '010-1234-5678
    }
    
    const response = await axios.post('외부_API_URL', formData)
    if(response.data){
    	alert('신청 되었습니다.)
    }
}

위에서 얘기 한 거 처럼 CORS문제로 인해 외부 API 통신은 클라이언트에서 하는게 아니라 Next.js 서버에서 해야 되기 때문에 먼저 API제작을 해야 한다.

1. API 제작

app/api/form/route.ts
이 루트로 파일을 만들면 http://localhost:3000/api/form url로 API통신을 할 수 있게 된다.

*route.ts

import axios from 'axios';
import { NextRequest, NextResponse } from 'next/server'

export const POST = async(request: NextRequest) => {
	const body = await request.json() // 클라이언트에서 받은 데이터
    
    const formData = {
    	name: body.name,
      	tel: body.tel
    }
    
    try{
      // 외부 API로 통신
      const response = await axios.post("외부_API_URL",formData)
      
      // 통신 성공 하면 클라이언트에서 알리기
      return new NextResponse(JSON.stringify(response.data),{
      	status:200
      })
      
    }catch(error){
      console.log(error)
      return new NextResponse("server error", {
      	status: 500
      }) 
    }
}

이렇게 Next.js 서버에서 클라이언트에서 받은 데이터를 외부 API에게 넘길 수 있다.

2.클라이언트 URL 변경

const onSubmit = async(e:ChangeEvent<HTMLFormElement>) => {
	e.preventDefault();
  
  	const formData = {
    	name: '홍길동',
      	tel: '010-1234-5678
    }
    
    const response = await axios.post('http://localhost:3000/api/form', formData)
    if(response.data){
    	alert('신청 되었습니다.)
    }
}

마지막으로 처음 작성했던 onSubmit에서 통신 URL을 우리가 만들었던 API URL로 변경을 해주면 끝이난다.

그러면 흐름은 이렇게 된다.
1. 클라이언트는 Next.js 서버로 데이터를 넘긴다.
2. Next.js API Routes는 클라이언트에게 데이터를 받는다.
3. 클라이언트에게 받은 데이터로 외부 API와 통신한다.

이렇게 해서 CORS문제 없이 외부 API와 통신 처리를 할 수 있다.

(Next.js를 사용하면 문제를 해결할 수 있는 방안이 넓어져서 좋다.)