react - CORS 오류 해결

사담

react로 날씨 웹을 만들기 위해 공공데이터포털에서 날씨 관련 API를 사용하려고 했으나 불러오는 과정에서 CORS 오류가 발생했다.

이전에 사용했던 API에선 이런 경우가 없었기에 당황스러웠다.
검색해서 찾아보니 CORS라는 정책 문제였다.

CORS 관련 자세한 내용은 이분이 자세하게 설명해 주셨다.
https://evan-moon.github.io/2020/05/21/about-cors/

뭐가 문제인지 알았기에 쉽게 해결하는가 했으나 꽤 오랜시간 애를 먹었다.
인터넷에 돌고있는 여러가지 방법을 시도해봤지만 내 멘탈만 갉아먹었다.

본론

실패했다면 블로그 글을 쓰진 않았을 것이다.
내게 성공을 가져다준 고마운 은인은 바로 HR Yu님이다. 이분의 유튜브 영상을 보고 해결해버렸다.
HR Yu님 유튜브 영상
참고 블로그

방법은 porxyserver 역할을 하는 node 서버를 만들어 공공데이터 포털 api를 불러오고 리엑트에선 이 node 서버를 불러오는 것으로 CORS를 해결했다.

자세한 내용은 위 블로그와 영상에 설명되어있고 나는 빠르게 설정할 수 있는 방법을 명시하겠다.
1. node 서버를 열 폴더를 만들고 npm init -y로 node 환경을 준비해준다.
2. npm install --save express cors axios 설치
3. 다음과 같이 폴더구조를 만든다.

• config의 serverKey, url은 따로 분리하면 관리하기 편하다.
• server.js는 node server를 구동시키는 기능을한다.
• axdata는 axios로 api data를 불러오는 기능을한다.
  

4. url.js (serviceKey.js도 같은 식으로 하면된다.)

module.exports = {
  weatherUrl:"해당 API url",
};

5. server.js

const express = require("express");
const cors = require("cors");
const axdata = require("./axdata.js");
const app = express();

app.use(cors());
app.get("/", async (req, res) => {
  await axdata((error, data) => {
    if (error) {
      res.send(error);
    } else {
      res.send(data);
    }
  });
});

app.listen(8000, () => {
  console.log("the server is running at the port 8000");
});

6. axdata.js

const axios = require("axios");
const { WetherKey } = require("./config/serviceKey.js");
const { weatherUrl } = require("./config/url.js");

const axdata = async (stationName, callback) => {
  const url = weatherUrl;
  //decodeURIComponent 디코드 해야지만 돌아간다.
  const serviceKey = decodeURIComponent(WetherKey);

  try {
    const response = await axios.get(url, {
      //파라미터로 시크릿 키, 몇시, 언제의 정보를 보여줄건지 등의 세부정보를 설정한다.
      params: {
        pageNo: "1",
        numOfRows: "10",
        dataType: "JSON",
        base_date: "20220317",
        base_time: "0500",
        nx: "55",
        ny: "127",
        serviceKey: serviceKey,
      },
    });
    const data = response.data.response.bod;
    callback(undefined, { data: data });
  } catch (error) {
    console.log("error broke ou: ", error);
  }
};

module.exports = axdata;

7. npm start로 express 서버를 켜고 react에선 node 서버의 url인 localhost:8000을 get 요청으로 불러오면 성공이다.

결론

CORS 이녀석...