Getting 502 bad gateway error and CORS problem on Wanderlust project

Get Help JavaScript
#1

I am working on this Wanderlust project that’s included in the Full-stack path. I am on step 13 and I am getting this error in the console, despite my first fetch in step 12 working just fine (I saw the response logged in the console).

Access to fetch at 'https://api.foursquare.com/v3/places/search?near=Jerusalem&limit=10' from origin 'https://50bbd106b02349458971cd684c320236.cc-propeller.cloud' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
main.js:31

GET https://api.foursquare.com/v3/places/search?near=Jerusalem&limit=10 net::ERR_FAILED 502

What can I do here? Here’s my code.

const url = new URL('https://api.foursquare.com/v3/places/search?near=');
const options = {
  method: 'GET',
  headers: {
    Accept: 'application/json',
    Authorization: foursquareKey
  }
};

// Add AJAX functions here:
const getPlaces = async () => {
  const city = $input.val();
  const urlToFetch = new URL(`${url}${city}&limit=10`);
  try {
    const response = await fetch(urlToFetch, options);
    if (response.ok) {
      const jsonResponse = await response.json();
      console.log(jsonResponse);
    }
  } catch(error) {

  }
};

Thanks in advance for your help!