在 javascript / typescript 中使用“fetch”对 IPFS URI 进行 API 调用（被 cors、网络错误或类型错误阻止）

Question

我在浏览器中有一个 nextjs typescript 项目运行需要发出以下 fetch 请求：

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

此调用 returns 一个 JSON 对象，如下所示：

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

但是，我不断收到以下错误：

勇敢：

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 |         )

火狐：

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 |         )

当我在调试工具中查看请求时，我看到了：

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

我该如何解决这个问题？我已经看到问题 and articles explaining cors 但我不确定我是否遵循了建议。

我需要做什么才能对项目中的 IPFS 节点进行 API 调用？

编辑：对于那些试图测试的人，您可能需要 IPFS Companion

Answer 1

Phil 的评论方向正确：很少有浏览器原生支持“ipfs://”方案。

目前开箱即用的支持它的浏览器是 Brave 和 Opera，但是每个浏览器的处理方式略有不同 - 所以请测试您的代码。

此时安全的 cross-browser 方法是提取 CID 并创建一个新的 URL 以通过 IPFS HTTP 网关寻址该 CID，然后 fetch() URL相反。

您可以在此处找到 IPFS HTTP 网关列表：

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

在 javascript / typescript 中使用“fetch”对 IPFS URI 进行 API 调用（被 cors、网络错误或类型错误阻止）

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

javascript

typescript

cors

fetch

ipfs