fetch works in browser and postman, but not in website?

Ask the community
,
1

Can I get a sanity check on this code? I feel like I am missing something obvious.


export function resolveVanityUsername(username) {
  const url = 'https://api.steampowered.com/ISteamUser/ResolveVanityURL/v0001/?key=XXXXXXXXXXXXXXXXXXXXXXXXX&vanityurl=';    
    
  var fullUrl = url + username;
  console.log("Pre-fetch check");
  fetch(fullUrl, {method: 'get'})
  .then( (httpResponse) => {
    if (httpResponse.ok) {
    	return httpResponse.json();
    }
    else {
      return Promise.reject("Fetch did not succeed");
    }
  } )
  .then( (json) => {
    console.log(json.response.steamid);
    return json.response.steamid;
  } )
  .catch( (err) => {
    console.log(err);
    console.log("There was an error");
  } );

When I call this function from the frontend, I then console.log with:

console.log("Response JSON: " + responseJSON);

the result is:


Response JSON: [object Promise]
Pre-fetch check.

Can anybody explain why I am not getting the a valid response? and why the console is logging the pre-fetch debug line AFTER the response log, even though it is called BEFORE?

I can get this to work on chrome and postman with a json response, but for something funky is happening here. Any help or insight would be a great help.

Thanks!

2

Hay daxter154,

When trying to use your code from a page code, I get the following result
Pre-fetch check
TypeError: Failed to fetch
There was an error

And in the browser console, I get
Failed to load https://api.steampowered.com/ISteamUser/ResolveVanityURL/v0001/?key=XXXXXXXXXXXXXXXXXXXXXXXXX&vanityurl=yoav: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://807e59f2-9b46-4305-8f7a-f7bfc8c3ccf0.dev.wix-code.com’ is therefore not allowed access. The response had HTTP status code 403. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

The problem is CORS - client code is blocked, by default, from calling services on other domains. You can resolve this using the right CORS headers and the fetch API allows to specify those headers.

When running the same from backend code, I had to modify you code and adding return in front of the fetch call.

  console.log("Pre-fetch check");
  return fetch(fullUrl, {method: 'get'})
  .then( (httpResponse) => {

With that, I got the result
Pre-fetch check
Fetch did not succeed
There was an error

Which I guess is the expected result given the key is just XXXXXX.

3

Thanks for the response! the main code body posted above is already part of a backend module (although I did add the return before the fetch). But the same result ensued. If I understand correctly, The backend module is making the request server-side, so CORS shouldn’t be an issue?

Front end page code:

import {resolveVanityUsername} from 'backend/FetchCalls';
export function button1_click(event) {
...
let VanityID="Corndog"; // this is normally a text box value
let steamIDJSON = resolveVanityUsername(VanityID);
console.log("Response JSON: " + steamIDJSON);
...
}

With the FetchCalls.jsw file being:

import {fetch} from 'wix-fetch';  

export function resolveVanityUsername(username) {
  const url = 'https://api.steampowered.com/ISteamUser/ResolveVanityURL/v0001/?key=XXXXXXXXXXXXXXXXXXXX&vanityurl=';    
    
  var fullUrl = url + username;
  console.log("Pre-fetch check.");
  
  return fetch(fullUrl, {method: 'get'})
  .then( 
  (httpResponse) => {
    if (httpResponse.ok) {
        console.log("HTTP OK");
    	return httpResponse.json();
    }
    else {
      return Promise.reject("Fetch did not succeed");
    }
  } )
  .then( (json) => {
    return json.response.steamid;
  } )
  .catch( (err) => {
    console.log(err);
  } );

and my console looking like:

{}

Pre-fetch check.

HTTP OK

and finally, the json when done manually / through postman:

{
    "response": {
        "steamid": "76561198018792840",
        "success": 1
    }
}

Still miffed at why the function isnt returning the steamid String.

4

I have two things for you to check

  1. the result of a backend function is always a promise. You should change you client code to be
resolveVanityUsername(VanityID)
  .then((steamIDJSON) => { 
    console.log("Response JSON: " + steamIDJSON); 
    ...
   });

and if that does not work -

  1. Try removing the lines
.then( (json) => { 
    return json.response.steamid; 
} )

I suspect the result json is not what you expect and so this line fails.

5

Option 1 was the culprit! Thank you so much :smiley:

Looking back at it now, it totally makes sense why I would need the ‘.then(…’ logic