0

I need some basic help figuring out how to make a call to the Yummly API.

I understand JSON is not JSONP and I'm trying to understand the difference but I'm really struggling because I'm not even sure where to start.

I'm trying to do something very simple with the api, I just want to print the results to the log. If I can get to that point I'm fairly confident I can understand the difference.

I need help understanding what to put into my HTML file and how to structure my fetch so that I don't get another CROSS-ORIGIN-CONTROL-ERROR(i'm not sure exactly what the error was)

I think there is a way to actually just request the api with a JSON response and I think that would solve my issues. Either way I can't seem to figure out how to do that. Any help would be greatly appreciated!

fetch("https://api.yummly.com/v1/api/", {
  headers: {
    "Content-Type": "application/json",
    "X-Yummly-App-ID": "29bc3e83",
    "X-Yummly-App-Key": "e47af4293b45524b06ac7f4f37b20da4",
    "Access-Control-Allow-Origin": true
  }
}).then(function(data) {
  console.log(data)
}).catch(function(error) {
  console.log(error);
})

Failed to load https://api.yummly.com/v1/api/: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

EDIT:

I have figured out how to do this with jQuery. 

  function displayRecipes(){
$.ajax({
  url: link(keyword()),
  type: "GET",
  dataType: "JSONP"
  }).success(function(yumData){
    yumData.matches.forEach(function(recipe){
      generateThumbnailFor(recipe);
  });
});

};

I don't really want to use jQuery though. Can anyone help me figure out how to do this using plain javascript?

Fofaster
  • 127
  • 7
  • First, `Access-Control-Allow-Origin` is a response header, not a request header. Second, is `api.yummly.com` active? I can't seem to access it. – Meghan Apr 01 '18 at 21:03
  • I don't know what you mean a response header vs a request header? I can't change a response header? And this is straight from the yummly docs – Fofaster Apr 01 '18 at 21:22
  • API Endpoint: The endpoint for the current API version is http://api.yummly.com/v1. All URLs mentioned below are relative to the endpoint. The endpoint address may change in future versions of the API. – Fofaster Apr 01 '18 at 21:22
  • (https://image.ibb.co/fcviAS/image.png) – Meghan Apr 01 '18 at 22:06
  • request headers are sent by the browser, and response headers are sent by the server. to get around CORS you have to have the server attach the `Access-Control-Allow-Origin` header to the response – Meghan Apr 01 '18 at 22:07

0 Answers0