13Cross-Origin Read Blocking issue

JavaScript
1

I am trying to build a simple meal generator by using spoonacular API in my local environment.
I got an error message when I try to call the photos :

"

13Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type text/html. See for more details."

more details:

" Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax , which prevents the cookie from being set in a cross-site context. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.

Resolve this issue by updating the attributes of the cookie:

  • Specify SameSite=None and Secure if the cookie is intended to be set in cross-site contexts. Note that only cookies sent over HTTPS may use the Secure attribute.
  • Specify SameSite=Strict or SameSite=Lax if the cookie should not be set by cross-site requests"

I have also tried to code on codePen, and still can’t get the photos.

I don’t understand how and where to do this :

Specify SameSite=None and Secure if the cookie is intended to be set in cross-site contexts. Note that only cookies sent over HTTPS may use the Secure attribute.

Would anyone explain this for me? Thank you in advance!

2

It might be that you are opening the file from the local disk, rather than running from a web server (the clue will be there is a local path in the address bar rather than http or https).

I had a go with some simple code from their API in codepen.io, like this:

fetch('https://api.spoonacular.com/recipes/complexSearch?query=pasta&maxFat=25&number=2&apiKey=MYKEY')
   .then(x => x.json())
   .then(x => alert(JSON.stringify(x)))

With MYKEY replaced with my key, and this works.

Update: I tried this also as a local file and with a local dev server and it still works. Would be interested to see your code sample and how it differs.

4

Hi martinc
Thank you for replying.
Below is my code

const receiptAPI =
  "https://api.spoonacular.com/mealplanner/generate?apiKey="+myApiKey+"&timeFrame=day";

async function getMeal() {
  const myPromise = await fetch(receiptAPI);
  const myData = await myPromise.json();
  let bk = myData.meals[0];
  let lunch = myData.meals[1];
  let dinner = myData.meals[2];

  generateBtn.addEventListener("click", () => {
    breakfastDiv.innerHTML = `
        <h4>${bk.title}</h4>
        <img src=${bk.sourceUrl}>
        
    `;
    getMeal();
  });
}

getMeal();

I can get the title of the meals but not the photo.
This is the api I am using.=> https://spoonacular.com/food-api/docs#Generate-Meal-Plan

5

Thanks, I had a look and the problem is that the sourceUrl is not an image url, it is the link to the web page for that meal. So the problem is in understanding the API, rather than a technical problem with the code.

One trick is when you get a complicated error (and I have never seen THAT error before!) check the basics first. Like open the image URL by pasting it into a tab and does it work? Unfortunately programming is well know for having horrible error messages, and a bit of guessing/detective work can sometimes give some luck (not always though!)

What you probably need to do is make another API call (either per meal or maybe one single one) to get the details of that meal and get the image. I say probably because I am not sure what the API supports, or even if you can get that image - I’ll leave that to you to figure out.

1 Like
6

Also something to look out for, when you call getMeal, you get the meal and add another event listener. So you will end up with a listener for every time the button is clicked. You only need one, so I would move the generateBtn.addEventListener out of the function, but you will then need to move the breakfastDiv.innerHTML = ... code back inside getMeal.

You are aiming for a function getMeal that fetchs and displays the meal, and outside of that a line of code to add the event listener and all it needs to do is call getMeal when the button is clicked.

1 Like
7

I see!! Thank you for point out this problem.
I didn’t realize it isn’t the image itself.
Very appreciated!

I will also rewrite the code, thank you for guiding!!