Wanderlust

I am having a problem with the Wanderlust project which I think other people may have encountered, but I haven’t managed to find a way around it. At stage 13 when I try to log the response to the console I get this message:

A cookie associated with a cross-site resource at http://gstatic.com/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

I have googled this and see that it is probably something to do with chrome but I would like to know if there is a way around this as I would really like to look at the response from the request in the console.
Please can anyone help?

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

Maybe preface your url link with corsanywhere…?

https://cors-anywhere.herokuapp.com/api.apixu.com....

Thanks for your reply - I did try this but I still get the cross-site cookie message. I have however been able to complete the project, but this cookie thing keeps on coming up.

This forum thread at Github talks about disabling a feature in Chrome.

Thanks for putting that in my direction. Interesting reading!

I had this problem as well, I’m working on it now. What I found out was that if I hit the save button prior to step 13 it would give me this problem.

If you do all steps up to step 13, and then you save and console.log it works. You will see that it sends the request and you can copy the http like in the next steps.

I installed the JSON view that they link, and you should find something like this.

Hi There, I hope you are all well!

I was wondering if you could help me out! In Wanderlust, in particular point 13, it asks you to get the URL from the console and then copy and paste it into the browser! When I do that it says:
‘{“meta”:{“code”:400,“errorType”:“invalid_auth”,“errorDetail”:“Missing access credentials. See https://developer.foursquare.com/docs/api/configuration/authentication for details.”,“requestId”:“5ebbad756001fe001bea2943”},“response”:{}}’

I would really appreciate someone’s help as I have been stuck on this problem for days!

THANKS GUYS!

So to access these APIs requires:

for FourSquare
client ID
client secret
a url to the foursquare’s api

for APIXU
api key
a url to apixu’s api

Do you have all these?

Hi,

Thanks for your reply! I think I do! This is my code:

const clientId = ‘FOS12T0SYZPTFAAWSZUOUCBWG4XMIRDHOJZHEIFYNECXG0GN’;

const clientSecret = ‘XEGMPO4M1I2MMP1ZGSQT0AOLTK3442TDUI54BN13CMBF3HRU’;

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

// OpenWeather Info

const openWeatherKey = ‘3c8b40e3e8c700f5fef50fd2ac3f627f’;

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 venueDivs = [("#venue1"), ("#venue2"), ("#venue3"), $("#venue4")];

const weatherDiv = ("#weather1");

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}`);

}

const renderForecast = (day) => {

// Add your code here:

let weatherContent = ‘’;

$weatherDiv.append(weatherContent);

}

const executeSearch = () => {

$venueDivs.forEach(venue => venue.empty());

$weatherDiv.empty();

$destination.empty();

$container.css(“visibility”, “visible”);

getVenues()

getForecast()

return false;

}

$submit.click(executeSearch)

I’m not sure what the problem is but take a look at this section from the code I have and see if it helps:

// AJAX functions
// Return venues based on Search value input
async function getVenues() {
  const city = $input.val();
  const urlToFetch = url + city + '&venuePhotos=1&limit=10&client_id=' + clientId + '&client_secret=' + clientSecret + '&v=20171030';
  
  try {
    let response = await fetch(urlToFetch);
    if (response.ok) {
      let jsonResponse = await response.json();
      console.log(jsonResponse);
      let venues = jsonResponse.response.groups[0].items.map(location => location.venue);
      return venues;
    }
  }
  catch (error) {
    console.log(error);
  }
};