Make API call to IPFS URI with `fetch` in javascript / typescript (Blocked by cors, network error, or type error)

Question

I have a nextjs typescript project running in the browser that needs to make the following fetch request:

        const tokenURIResponse = await fetch(
            "ipfs://bafybeig37ioir76s7mg5oobetncojcm3c3hxasyd4rvid4jqhy4gkaheg4/?filename=0-PUG.json"
        )

This call returns a JSON object that looks like:

{
  "name": "PUG",
  "description": "An adorable PUG pup!",
  "image": "https://ipfs.io/ipfs/QmSsYRx3LpDAb1GZQm7zZ1AuHZjfbPkD6J7s9r41xu1mf8?filename=pug.png",
  "attributes": [
    {
      "trait_type": "cuteness",
      "value": 100
    }
  ]
}

However, I keep getting the following errors:

Brave:

Unhandled Runtime Error
TypeError: Failed to fetch

Source
components/NFTBox.tsx (85:39) @ _callee$

  83 | 
  84 |         // const tokenURIResponse = await fetch(tokenURI as string)
> 85 |         const tokenURIResponse = await fetch(
     |                                       ^
  86 |             "ipfs://bafybeig37ioir76s7mg5oobetncojcm3c3hxasyd4rvid4jqhy4gkaheg4/?filename=0-PUG.json",
  87 |         )

Firefox:

Unhandled Runtime Error

TypeError: NetworkError when attempting to fetch resource.
Source

components/NFTBox.tsx (85:39) @ _callee$

  84 | 
> 85 |         const tokenURIResponse = await fetch(
     |                                       ^
  86 |             "ipfs://bafybeig37ioir76s7mg5oobetncojcm3c3hxasyd4rvid4jqhy4gkaheg4/?filename=0-PUG.json",
  87 |         )

And when I look at the request in my debug tools, I see this:

Request URL: ipfs://bafybeig37ioir76s7mg5oobetncojcm3c3hxasyd4rvid4jqhy4gkaheg4/?filename=0-PUG.json
Referrer Policy: strict-origin-when-cross-origin
Provisional headers are shown
Learn more
Referer: http://localhost:3000/
User-Agent: XXXXXX

How do I fix this? I've seen questions talking about CORS and articles explaining cors but I'm not sure I follow what the suggestions are.

What do I need to do to make an API call to an IPFS node in my project?

EDIT: For those trying to test, you might need the IPFS Companion

Mine says 'URL scheme "ipfs" is not supported'. Chrome 99.0.4844.51 — Phil
– Phil, Commented Mar 16, 2022 at 0:02
I'm not familiar with IPFS Companion, but I think it works as a proxy to capture the requests and forward to a relevant gateway URL (since ipfs:// scheme isn't supported yet). What protocol, host, and port is the companion listening on? — Pandemonium
– Pandemonium, Commented Mar 16, 2022 at 16:44

Dietrich Ayala · Accepted Answer · 2022-03-16 10:41:18Z

6

Phil's comment is in the right direction: Few browsers support the "ipfs://" scheme natively.

Currently the browsers which support it out of the box are Brave and Opera, each handles it a bit differently however - so test your code.

The safe cross-browser approach at this point is to extract the CID and create a new URL to address that CID through an IPFS HTTP gateway, and fetch() that URL instead.

You can find a list of IPFS HTTP gateways here:

https://ipfs.github.io/public-gateway-checker/

answered Mar 16, 2022 at 10:41

Dietrich Ayala

9617 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Patrick Collins Over a year ago

Yeah that's the work around I'm going with at the moment, just using a gateway. It doesn't feel amazing, but I think it's the "easiest" to do right now.

Micah Zoltu Over a year ago

Using a public gateway completely defeats the purpose of using IPFS in the first place and IMO isn't a reasonable solution to this problem. The idea here would be to do something like first try ipfs://... and then if that doesn't work fallback to a gateway, but currently it seems that ipfs://... will always fail, even if the browser supports ipfs scheme via extension.

Collectives™ on Stack Overflow

Make API call to IPFS URI with `fetch` in javascript / typescript (Blocked by cors, network error, or type error)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related