Wanderlust (ASYNC JAVASCRIPT AND HTTP REQUESTS) - Foursquare CORS error

Hi all,

I’m working on the Wanderlust project as part of the Front End Engineer path and am currently stuck Step 12:

  1. Log the response to the console. In the browser window with the Wanderlust page, enter a city in the search field and submit. Make sure that you have your own browser’s JavaScript console open so that you can see the response that is logged to the console.

When I enter a city name and hit search, I see the following error in the console:

7dba958decde44b28010dfe0d6bb5cbe.cc-propeller.cloud/:1 Access to fetch at ‘https://api.foursquare.com/v3/places/search?near=auckland&limit=10’ from origin ‘https://7dba958decde44b28010dfe0d6bb5cbe.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.

Here are the relevant sections from main.js thus far:

// Foursquare API Info
const foursquareKey = 'redacted';
const url = 'https://api.foursquare.com/v3/places/search';

// OpenWeather Info
const openWeatherKey = 'redacted';
const weatherUrl = 'https://api.openweathermap.org/data/2.5/weather';

// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $placeDivs = [$("#place1"), $("#place2"), $("#place3"), $("#place4")];
const $weatherDiv = $("#weather1");
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

const options = {
  method: 'GET',
  headers: {
    Accept: 'application/json',
    Authorization: foursquareKey
  }
};

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

There’s no mention of CORS anywhere in the Foursquare docs. I’ve scoured these forums but haven’t found a solution to this exact problem. Most issues around this exercise seem to be related to the exercise instructions being specific to the Foursquare v2 endpoints, however it looks like the exercise was updated on 1/12/22 to refer to the newer v3 endpoints. Unfortunately the update hasn’t addressed the CORS issue.

Any guidance on this would be greatly appreciated!

Andy :slight_smile:

1 Like

Having the same issue.

I too am having the same issue - I’ve tried the same value for url as OP:
https://api.foursquare.com/v3/places/search’ as well as the ones in the hint:
https://api.foursquare.com/v3/places/search?near=’ but nothing is working, same error each time.
My urlToFetch is also slightly different to OP and reads const urlToFetch = ${url}${city}&limit=10;

Thanks for your help!

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.