Alchemy NFT市场项目Axios请求400错误求助

问题背景 #

我完成了Alchemy的NFT市场课程，但应用突然停止工作，当前出现Axios错误，错误源于Marketplace.js中获取NFT的tokenURI（存储NFT元数据的IPFS Pinata链接）的GET请求，对应代码行：

let meta = await axios.get(tokenURI);

我已花费两天时间排查仍未找到问题原因，恳请技术协助。

错误信息 #

https://gateway.pinata.cloud/ipfs/QmVEA6DxgG6QiPB56E6gP6V7AfeF5D82TXrNML7fzSFPV5
Marketplace.js:69 
xhr.js:220          GET https://gateway.pinata.cloud/ipfs/QmVEA6DxgG6QiPB56E6gP6V7AfeF5D82TXrNML7fzSFPV5 400
dispatchXhrRequest @ xhr.js:220
xhrAdapter @ xhr.js:16
dispatchRequest @ dispatchRequest.js:58
request @ Axios.js:109
Axios.<computed> @ Axios.js:131
wrap @ bind.js:9
(anonymous) @ Marketplace.js:70
await in (anonymous) (async)
getAllNFTs @ Marketplace.js:63
await in getAllNFTs (async)
Marketplace @ Marketplace.js:95
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
Marketplace.js:91 Uncaught (in promise) AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
getAllNFTs @ Marketplace.js:91
await in getAllNFTs (async)
Marketplace @ Marketplace.js:95
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
xhr.js:220          GET https://gateway.pinata.cloud/ipfs/QmVEA6DxgG6QiPB56E6gP6V7AfeF5D82TXrNML7fzSFPV5 400
dispatchXhrRequest @ xhr.js:220
xhrAdapter @ xhr.js:16
dispatchRequest @ dispatchRequest.js:58
request @ Axios.js:109
Axios.<computed> @ Axios.js:131
wrap @ bind.js:9
(anonymous) @ Marketplace.js:70
await in (anonymous) (async)
getAllNFTs @ Marketplace.js:63
await in getAllNFTs (async)
Marketplace @ Marketplace.js:95
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20145
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
Marketplace.js:91 Uncaught (in promise) AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

相关代码（Marketplace.js） #

import Navbar from "./Navbar";
import NFTTile from "./NFTTile";
// import MarketplaceJSON from "../Marketplace_goerli.json";
import MarketplaceJSON from "../Marketplace_localhost.json";
import axios from "axios";
import { useState } from "react";

export default function Marketplace() {
  const sampleData = [
    {
      name: "NFT#1",
      description: "Alchemy's First NFT",
      website: "http://axieinfinity.io",
      image:
        "https://gateway.pinata.cloud/ipfs/QmTsRJX7r5gyubjkdmzFrKQhHv74p5wT9LdeF1m3RTqrE5",
      price: "0.03ETH",
      currentlySelling: "True",
      address: "0xe81Bf5A757CB4f7F82a2F23b1e59bE45c33c5b13",
    },
    {
      name: "NFT#2",
      description: "Alchemy's Second NFT",
      website: "http://axieinfinity.io",
      image:
        "https://gateway.pinata.cloud/ipfs/QmdhoL9K8my2vi3fej97foiqGmJ389SMs55oC5EdkrxF2M",
      price: "0.03ETH",
      currentlySelling: "True",
      address: "0xe81Bf5A757C4f7F82a2F23b1e59bE45c33c5b13",
    },
    {
      name: "NFT#3",
      description: "Alchemy's Third NFT",
      website: "http://axieinfinity.io",
      image:
        "https://gateway.pinata.cloud/ipfs/QmTsRJX7r5gyubjkdmzFrKQhHv74p5wT9LdeF1m3RTqrE5",
      price: "0.03ETH",
      currentlySelling: "True",
      address: "0xe81Bf5A757C4f7F82a2F23b1e59bE45c33c5b13",
    },
  ];
  const [data, updateData] = useState(sampleData);
  const [dataFetched, updateFetched] = useState(false);

  async function getAllNFTs() {
    const ethers = require("ethers");
    //After adding your Hardhat network to your metamask, this code will get providers and signers
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    //Pull the deployed contract instance
    let contract = new ethers.Contract(
      MarketplaceJSON.address,
      MarketplaceJSON.abi,
      signer
    );

    //create an NFT Token
    let transaction = await contract.getAllNFTs();

    //Fetch all the details of every NFT from the contract and display
    const items = await Promise.all(
      transaction.map(async (i) => {
        const tokenURI = await contract.tokenURI(i.tokenId);
        console.log(tokenURI);
        let meta = await axios.get(tokenURI);
        meta = meta.data;
        console.log(` The tokenURI metadata are: ${meta}`);

        let price = ethers.utils.formatUnits(i.price.toString(), "ether");
        let item = {
          price,
          tokenId: i.tokenId.toNumber(),
          seller: i.seller,
          owner: i.owner,
          image: meta.image,
          name: meta.name,
          description: meta.description,
        };
        return item;
      })
    );

    updateFetched(true);
    updateData(items);
  }

  if (!dataFetched) getAllNFTs();

  return (
    <div>
      <Navbar></Navbar>
      <div className="flex flex-col place-items-center mt-20">
        <div className="md:text-xl font-bold text-white">Top NFTs</div>
        <div className="flex mt-5 justify-between flex-wrap max-w-screen-xl text-center">
          {data.map((value, index) => {
            return <NFTTile data={value} key={index}></NFTTile>;
          })}
        </div>
      </div>
    </div>
  );
}

排查方向与解决建议 #

1. 验证IPFS链接有效性：直接在浏览器中访问报错的IPFS链接，确认是否能正常返回元数据。如果无法访问，说明：
   • Pinata上的文件已被删除或取消固定
   • CID输入错误或合约中存储的tokenURI有误
2. 检查tokenURI格式：确保tokenURI返回的是标准HTTP格式链接，而非ipfs://开头的原生IPFS地址。如果是ipfs://格式，需要替换为网关链接（如将ipfs://替换为https://gateway.pinata.cloud/ipfs/）
3. 处理CORS限制：Pinata网关可能存在CORS限制，尝试在Axios请求中添加相关请求头：

   let meta = await axios.get(tokenURI, {
     headers: {
       'Access-Control-Allow-Origin': '*'
     }
   });
   

   或使用Pinata后台配置的专用网关
4. 修复异步渲染逻辑：当前组件渲染时直接调用getAllNFTs()可能导致重复请求或渲染异常，建议用useEffect钩子包裹异步请求：

   useEffect(() => {
     if (!dataFetched) getAllNFTs();
   }, [dataFetched]);
   

5. 添加错误捕获：在Axios请求处添加try-catch块，捕获并输出详细错误信息，同时避免整个请求链崩溃：

   try {
     let meta = await axios.get(tokenURI);
     meta = meta.data;
   } catch (error) {
     console.error("获取元数据失败:", error.response?.data || error.message);
     // 可返回默认数据或跳过该NFT
     return null;
   }
   

内容的提问来源于stack exchange，提问作者Weisel2095