Cross-Origin Request Blocked when resolving usernames via React.

[benslv]

I was trying to use this library in a React application to query the games shared by a list of usernames but I seem to be getting blocked by CORS when resolving the usernames into IDs. The full error is as follows:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.steampowered.com/ISteamUser/ResolveVanityURL/v1?vanityurl=<username>&key=<apikey>. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

I tried force-enabling CORS with this addon and the application worked as expected.

Here's the code I'm running:

import SteamAPI from "steamapi";

let steam;

const getUserGames = async (username) => {
  const userID = await steam.resolve(
    `https://steamcommunity.com/id/${username}/`,
  );
  return (await steam.getUserOwnedGames(userID)).map((game) => game.name);
};

export const getIntersect = async (apiKey, usernames) => {
  steam = new SteamAPI(apiKey);

  const games = await Promise.all(usernames.map(getUserGames));

  return games.reduce((a, b) => a.filter((game) => b.includes(game))).sort();
};

[billygerhard]

CORS is set on the server. This means that Steam does not want front end applications to use their API. It is designed to only allow backend servers to call the API. Your app structure should be have your React app call your own backend, then that backend will call the Steam API, then forward that data back to your front end.