Project : [Next Js] axios 그리고 CORS

lunaxislu·2024년 1월 27일

next js project

project

목록 보기

9/17

axios를 통해 웹 페이지를 get 해서 Open Graph의 meta image를 Preview로 보여주는 기능을 해야 하는데...

몇 시간동안 삽질을 했다.

이유는 Next js를 사용해서 final project를 사용 하는데...

Next js가 기본적으로 SSR 이다 등 이론만 그냥 '웅' '웅' '아 .. 그렇구나' 알지

써먹어본적이 없으니 삽질만 한다.

자 이제 시작해보자

axios를 사용해서 웹페이지를 get 요청 한 이 후 무엇이 받아와 지는지 한 번 보려고 해서 코드를 짜보았다.

// src/components/platform/Input.tsx
	
 const test = async() => await axios.get('https:www.naver.com')

  useEffect(() => {
    test().then(result => conosle.log(result))
  }, []);

이렇게 우선 test로 웹페이지를 요청한 이후 result를 브라우저의 콘솔창으로 보려고 했는데...

Runtime 에러가 뜨면서

console창을 확인해보니

CORS 에러가 뜬다.

처음에는

https 와 http 차이 때문인 줄 알았으나...

지금 나는 Next Js에서 Componet에서 Client side에서 axios 요청을 하는데

브라우저 입장에서는 내가 있는 페이지는 localhost 3000 인데 다른 페이지인 네이버에 요청하기에 비정상적이다라고 브라우저가 CORS 에러를
띄우는 상황인 것

즉 요약하자면 내 브라우저 현 주소에서 다른 주소의 페이지를 요청하는 것이 안된다는 말

그렇다면 어찌한담.....

멀 어째 해결해야지

CORS Solve
Next JS CORS 설정

이렇게 프로젝트 전체에다 적용하던지 하면 되는데

우선 팀프로젝트이고 내가 맡은 페이지의 platform에서만 CORS를 우회하면 되는 상황이라

Next js를 검색하던 와중

pages 의 api 폴더를

Next Js에서 제공하는데

여기다가 코드를 작성하면 해결 할 수 있다.

Next JS API Routes

api 폴더안에 파일들은

서버라고 생각하면 된다.

내가 직접 api 요청 응답을 직접 custom 하는 곳이라 생각하면 되는데

여기다 하는 이유는 서버단에서 브라우저에 요청하는 것은 CORS 에러를 건들지 않기에

내가 직접 내가 만든 서버에다 네이버 웹페이지를 요청하면 내가 만든 서버는 네이버 웹페이지를 요청하고

요청 받은 응답을 내가 페이지(컴포넌트)에 응답을 보내주는 형식으로 우회할 수가 있다.

백문이 불여일견이라고 한 번 코드를 보자

Sample


|  ├─ pages
│  │  ├─ api // api 폴더는 Next Js에서 제공하는 폴더이고 서버단이라 생각하자!!
│  │  │  └─ open-graph.ts

// pages/api/open-graph.ts

위 경로가 내가 지금 사용하는 localhost3000 의 서버 주소라 생각하자

http://localhost:3000/api/open-graph <- 서버 주소

import axios from 'axios';
import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).send('Next Js... WonderFull..');
}