Codecademy Forums

Wanderlust : CORS error

https://www.codecademy.com/paths/build-web-apps-with-react/tracks/bwa-ajax-requests-and-api-interactions/modules/bwa-http-requests/projects/wanderlust

I completed 12 of tasks. When I try to log the response object, I get this error.

d30d5265095940d09eea46507971987f.cc-propeller.cloud/:1 Access to fetch at ‘https://www.wanderlust.com/?near=columbus&limit=10&client_id=02X2ELV1TBGODSUVZS0GZ5AWTZHNE5J1PUN2IO2YXTN5JEMN&client_secret=2GZSWXKSJZ0S2WT23G2DEBRP34I21ZQSGV4TJI3GCQXV13DN&v=20180101’ from origin ‘https://d30d5265095940d09eea46507971987f.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.

I tried to open chrome exe with --disable-web -security, and to use chrome plugin called Allow-Control-Allow-Origin, but all I get is failure message.

How can I solve this?

If anything is wrong with my code, please mention that. I attached my code for wanderlust. (Remember, I only did 12 tasks.)

// Foursquare API Info
const clientId = '';
const clientSecret = '';
const url = 'https://www.wanderlust.com?near=';

// APIXU Info
const apiKey = '';
const forecastUrl = 'https://api.apixu.com/v1/forecast.json?key=';

// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4")];
const $weatherDivs = [$("#weather1"), $("#weather2"), $("#weather3"), $("#weather4")];
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// Add AJAX functions here:
const getVenues = async () => {
	const city = $input.val();
  const urlToFetch = `${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20180101`;
  try {
    const response = await fetch(urlToFetch);
    if(response.ok) {
      console.log(response);
    } else {
      throw new Error('Request failed!');
    }
  } catch(error) {
    console.log(error);
  }
}

const getForecast = () => {

}


// Render functions
const renderVenues = (venues) => {
  $venueDivs.forEach(($venue, index) => {
    // Add your code here:

    let venueContent = '';
    $venue.append(venueContent);
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}

const renderForecast = (days) => {
  $weatherDivs.forEach(($day, index) => {
    // Add your code here:


    let weatherContent = '';
    $day.append(weatherContent);
  });
}

const executeSearch = () => {
  $venueDivs.forEach(venue => venue.empty());
  $weatherDivs.forEach(day => day.empty());
  $destination.empty();
  $container.css("visibility", "visible");
  getVenues()
  getForecast()
  return false;
}

$submit.click(executeSearch)

Hello, welcome to the forum :slight_smile:

It is not a good idea to share your API keys, never. API keys are just like passwords. I edited your post.

It looks like your code is correct. I see only one problem, take a look at this line:

const url = 'https://www.wanderlust.com?near=';

Quote from the step 3 of the instructions:

Create a const called url . Check the Foursquare documentation to see the explore venue API endpoint.
Add the near parameter without a value. To add a query to the end of a URL, be sure to use ? followed by the first key ( near ) and an = . You’ll add the value of the near parameter to this URL string when you make the request itself.

Open the linked documentation article:

Request
GET https://api.foursquare.com/v2/venues/explore

This means that if you want to communicate with the Foursquare venue API endpoint you have to change this line of code to:

const url = 'https://api.foursquare.com/v2/venues/explore?near=';