Steam WEB API. Is it possible to get data on localhost in Vue.js?

Question

I have problem with GetUserStatsForGame in Vue.js. Warning in console: A request has been blocked for a resource of other origin. Reason: CORS header 'Access-Control-Allow-Origin' missing.

As you can see in my code i have headers. The warning should disappear.

In APIKEY domain i tried: localhost localhost:8080 127.0.0.1 http://127.0.0.1/ http://localhost/ and more... but nothing.

GET in Network looks fine: https://prnt.sc/n4jipf

      this.$axios
        .get(
          `http://api.steampowered.com/ISteamUserStats/GetUserStatsForGame/v2/?appid=${
            this.appid
          }&key=${this.APIKEY}&steamid=76561198269391482&format=json`,
          {
            headers: {
              "Content-Type": "application/json",
              Accept: "application/json"
            }
          }
        )
        .then(r => {
          console.log(r);
        });

I want to display data from API on front-end but i have error in console "Network error" the data is not displayed.

Is is possible to display data on localhost?

Answer 1

Try using this browser extension, this fixed a similar issue that I ran into while testing a website:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en