Fetch request fails

JavaScript
1

You can view my codepen at Codepen Project

On line 10 I define a fetch request, but when I call the function the code after the fetch request and the fetch request do not run / error for some other reason. Can anyone help me bugtest this?

async function apiGet(url) {
  console.log("apitest");
  let response = await fetch(url);
  console.log(response.ok);
}
2

You’re having a CORS error. Might want to look into passing an options object into your fetch function: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Because your codepen is in one domain, and you’re trying to fetch from another, you need to somehow tell it to allow “cross-origin resources.”

Looking into it more, insofar as your Pit Panda resource goes, you may need to request API keys: https://pitpanda.rocks/keyinfo

3

Thank you! The reasource works without an api key (just try pasting the api link into your browser, it works as is), but I will look into the CORS error.

4

var Init = {
method: “GET”,
mode: “cors”,
type: “json”,
cache: “default”
};

async function apiGet(url, myInit) {
console.log(“apitest”);
let response = await fetch(myRequest, myInit);
console.log(“apifini”);
}

I tried adding a cors tag to specify cross origin resources.

5

Loading the JSON in the browser isn’t cross-origin, fetching it from a page (like Codepen) is.

You most likely have to create a backend that uses cors and returns the JSON (sometimes called a proxy API). You would want a backend anyway if you are dealing with API keys.

Here is an example. I’m just logging the data (only works as long as the backend is running).

Here is the very quick backend

https://replit.com/@lasjorg/API-example#index.js

You can fork it if you want. I will delete the example at some point.

Edit: Just to be clear. The Codepen fork button is at the bottom of the footer and for the Replit, you can create an account and fork the example code.

BTW, I’m not sure why you are importing fetch, it is a browser API. You do not need to import anything.

https://cdnjs.cloudflare.com/ajax/libs/fetch/3.6.2/fetch.min.js

1 Like
6

Oh my god, thank you so much. I have been trying to solve this problem for ~10hrs. This solution works perfectly, I will research more into backends.

7

No problem, happy to help.

Did you fork the code? Just so I know when I can delete it.

8

Yes, go ahead and delete it. Also, why do you have to use a backend, the link “https://pitpanda.rocks/api/players/fearwoolboy” returns the same thing as “https://api-example.lasjorg.repl.co/api/player”, but does not work when used in the code?

9

It is a bit technical. I’m not even sure I can explain it well enough.

When you load the API URL in the browser it is loaded directly from the browser. When you fetch it the host that runs the fetch code is requesting a resource. The two are not the same. CORS blocking is a browser security feature.

The backend I posted has added the header using the cors package.

10

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