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

Question

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

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

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

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

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

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

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

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

如何修复此问题？我见过谈论 CORS 和 解释 cors 的文章，但我不确定我是否遵循了这些建议。

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

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

Answer 1

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

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

此时安全的跨浏览器方法是提取 CID 并创建一个新 URL 以通过 IPFS HTTP 网关寻址该 CID，然后改为 fetch() 该 URL。

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

https://ipfs.github.io/public -网关检查器/