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!