Riot APIs - CORS Policy Error

사건 배경 . . .

평소에 리그오브레전드(LOL) 라는 게임을 즐겼던 유저로서 op.gg 또는 fow.kr 사이트에 접속하는 일이 빈번했고, 관심이 있었기에 Riot Developer Portal 에서 제공해주는 API를 사용하여 작은 프로젝트를 진행하고자 했습니다.

그런데, API를 호출하는 과정에서 다음과 같은 오류를 직면하게 되었습니다 ❗❗❗

처음 접해보는 경우라서 구글링을 해본 결과, CORS Policy 로 인한 오류라는 사실을 알게 되었습니다.
해결 부분의 사진 글을 읽어 보시면 아시겠지만, API key secure를 위해 Riot API에 대한 클라이언트 측 호출을 차단한다고 합니다.

CORS Policy가 뭔가요 . . . ?

✅ CORS(Cross-Origin Resource Sharing) : 교차 출처 리소스 공유

출처가 교차한다라... 출처는 origin의 번역 표현이고, 여기서 말하는 출처는 URL의 도메인(호스트네임), 프로토콜, 포트 까지 포함이며 이 중 하나라도 다르면 CORS 에러를 만나게 됩니다.
웹 서버에서 자신과 origin(출처)가 다른 곳에서의 http 요청을 받을 때 발생하는 오류라고 합니다.

따라서 나는 localhost 라는 origin에서 https://asia.api.riotgames.com 라는 origin에 요청 보내고 있기 때문에, 브라우저에서 출처가 서로 다른 곳에서의 요청을 받아 차단하는 오류가 발생한 것입니다.

더 자세히 알고자 하신 분들은 링크를 참고 해주세요 ~

---

그래서 어떻게 해결하는데 ❗❓

사실 크롬 환경에서는 확장 프로그램(Allow CORS)만 설치하고 실행만 시켜주면 정말 간단하게 해결 가능합니다. ( 빠른 해결을 원하시는 분들은 적극 권장 ! )

하지만 공부하는 입장이고, 뭔가 확장 프로그램에 의존하고 싶지 않다는 마음이 들어 다른 방법을 찾고자 했습니다.

그래서 어떻게 해결했냐면 . . .

우선 Backend Server 또는 Proxy Server 를 셋업 해야 하는데, Backend Server 에 대한 지식이 없기 때문에 Express로 Proxy Server를 열어 API 호출을 진행 했습니다.

Step 1.

// proxyServer.js

var express = require("express");
var cors = require("cors");
const axios = require("axios");

var app = express();

app.use(cors());

const BASE_URL = "https://asia.api.riotgames.com";
const API_KEY = "발급 받은 API KEY";

function getUserData(playerName, playerTag) {
  return axios
    .get(
      `${BASE_URL}/riot/account/v1/accounts
		/by-riot-id/${playerName}/${playerTag}?api_key=${API_KEY}`
    )
    .then((response) => response.data)
    .catch((err) => err);
}

app.get("/userdata", async (req, res) => {
  const playerName = req.query.username;
  const playerTag = req.query.usertag;

  const userData = await getUserData(playerName, playerTag);

  res.json(userData);
});

app.listen(8080, function () {
  console.log("Server started on port 8080");
});

Step 2.

// pakage.json

{
  ... ,
  "proxy": "http://localhost:8080",
  ... ,
}

Step 3.

// API 호출할 컴포넌트 파일 내부에서

function getUserData() {
    axios
      .get("http://localhost:8080/userdata", {
        params: {
          username: "hide on bush",
          usertag: "KR1",
        },
      })
      .then((response) => console.log(response.data))
      .catch((err) => console.error(err));
  }

---

글을 마치며 요약하자면 . . .

1. Riot API 는 API Key secure 를 위해 클라이언트 측 호출을 차단합니다. (CORS)
2. 빠른 해결을 원한다면, CORS Allow 관련 확장프로그램을 설치하면 됩니다.
3. 그렇지 않다면, Backend Server 를 두어 API 를 호출하거나 Proxy Server 를 통해 호출해야 합니다.