react-CORSエラーの排除

プライベートトーク

reactで天気Webを作成するために、パブリックデータポータルは天気に関連するAPIを使用しようとしたが、ロード中にCORSエラーが発生した.

以前使っていたAPIではこのようなことはなかったので驚きました.
検索してみると、これはCORSという政策問題だ.
CORSの詳細についてはこちらから詳しく説明します.
https://evan-moon.github.io/2020/05/21/about-cors/
何が問題なのか分かっていたので簡単に解決できたのですが、かなり時間がかかりました.
ネットで伝わる方法をいろいろ試したことがありますが、私の精神だけをかじってしまいました.

本題

失敗したらブログを書かない.
成功をもたらしてくれた恩人はHR YuこちらのYouTube動画を見て解決しました
HR YuのYouTube動画
コメントブログ
方法はporxyserverとして機能するノードサーバを作成し、共通データポータルapiをロードし、reactでノードサーバをロードすることでCORSを解決することである.
詳細は上記のブログやビデオで説明していますが、迅速な設定方法について説明します.
1.ノードサーバを開くフォルダを作成し、npm init -yを使用してノード環境を準備します.
2.取付npm install --save express cors axios3.次の手順でフォルダ構造を作成します.

configのServerKey、urlは単独で分離して管理しやすい.

server.jsはnodeサーバを駆動する機能を有する.

axdataはaxiosでapiデータをロードする機能を有する.

url.js(serviceKey.jsも同様)

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

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");
});

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;

npm startでexpressサーバを開き、reactではノードサーバのURL localhost:8000をGETリクエストとしてロードすれば成功します.

n/a.結論

CORSこいつは...