NextJS开发NFT市场遇CORS跨域错误，求解决方案

问题分析 #

你遇到的CORS错误是因为Pinata公共网关默认未配置允许http://localhost:3000的跨域请求头，导致前端直接请求IPFS资源时被浏览器拦截，进而触发Axios网络错误。Chrome的CORS扩展通常对XMLHttpRequest请求的兼容性不好，所以无效。

解决方案（NextJS专属） #

方案1：利用NextJS API路由做代理（推荐生产环境使用） #

通过NextJS的API路由作为中间层转发请求，避免直接跨域调用Pinata网关：

1. 在项目pages/api/目录下创建proxy-ipfs.js文件，写入以下代码：

import axios from 'axios';

export default async function handler(req, res) {
  const { url } = req.query;
  if (!url) {
    return res.status(400).json({ error: '缺少IPFS资源地址' });
  }

  try {
    const response = await axios.get(decodeURIComponent(url), {
      responseType: 'stream',
    });

    // 转发Pinata返回的响应头
    Object.keys(response.headers).forEach(key => {
      res.setHeader(key, response.headers[key]);
    });
    // 允许跨域访问（可选，API路由默认同域可用，如需支持其他域名可添加）
    res.setHeader('Access-Control-Allow-Origin', '*');

    // 转发资源流到前端
    response.data.pipe(res);
  } catch (error) {
    res.status(error.response?.status || 500).json({ error: error.message });
  }
}

2. 修改前端请求逻辑，将原来直接请求Pinata的URL替换为调用代理路由：

// 原请求代码：axios.get('https://gateway.pinata.cloud/ipfs/xxx')
// 修改后：
const ipfsResourceUrl = 'https://gateway.pinata.cloud/ipfs/QmbbWLfoPg9aSpFCKoYQRadQynmCRMjydVhkXJZKBXKnyT';
axios.get(`/api/proxy-ipfs?url=${encodeURIComponent(ipfsResourceUrl)}`)

方案2：配置NextJS重写规则（轻量便捷） #

通过NextJS的重写规则，让浏览器认为IPFS请求是同域请求，自动转发到Pinata网关：

1. 修改项目根目录下的next.config.js文件，添加重写配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/ipfs/:path*',
        destination: 'https://gateway.pinata.cloud/ipfs/:path*',
      },
    ];
  },
};

module.exports = nextConfig;

2. 前端请求时直接使用相对路径：

axios.get('/ipfs/QmbbWLfoPg9aSpFCKoYQRadQynmCRMjydVhkXJZKBXKnyT')

NextJS会自动将该请求转发到Pinata网关，避免跨域问题。

补充说明 #

• 不要依赖浏览器CORS扩展，这类工具仅适用于本地调试，生产环境完全无效，且对XMLHttpRequest请求的处理存在兼容性问题。
• 若你使用的是自己部署的Pinata私有网关，可直接在Pinata后台配置CORS规则，添加http://localhost:3000及生产环境域名到允许列表；但公共网关无法修改配置，因此代理或重写是通用解决方案。

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