使用Tatum IPFS API时遭遇CORS错误，求解决方案

问题描述 #

运营NFT平台时，使用Tatum API将NFT图片与元数据上传至IPFS，此前React应用中代码可正常运行，但现在出现CORS报错：

Access to fetch at 'https://api-eu1.tatum.io/v3/ipfs' from origin 'reactapp.com' has been blocked by CORS policy: Request header field x-api-key is not allowed by Access-Control-Allow-Headers in preflight response.

相同API密钥在Postman中可正常调用，但React应用失效。原调用代码如下：

const form = new FormData();
form.append("file", "[object Object]");

const resp = await fetch(
  `https://api-eu1.tatum.io/v3/ipfs`,
  {
    method: 'POST',
    headers: {
      'x-api-key': 'My-API'
    },
    body: form
  }
);

const data = await resp.text();
console.log(data);

修复方法 #

1. 配置Tatum平台的CORS允许域名 #

Tatum可能更新了CORS策略，需要在你的Tatum账户后台，将reactapp.com（包含完整协议，比如https://reactapp.com）添加到允许的跨域来源列表中。多数API平台都会提供CORS白名单配置入口，检查Tatum控制台的API设置或安全选项完成配置。

2. 搭建后端代理转发请求 #

浏览器的CORS限制仅针对前端直接调用第三方API，通过自身后端服务转发请求即可绕过限制。以下是Node.js + Express的简易代理示例：

后端代理代码（Express）

const express = require('express');
const fetch = require('node-fetch');
const FormData = require('form-data');
const multer = require('multer');
const upload = multer();
const app = express();
const cors = require('cors');

app.use(cors());
app.use(express.json());

app.post('/api/ipfs-upload', upload.any(), async (req, res) => {
  try {
    const formData = new FormData();
    // 转发前端传来的文件
    req.files.forEach(file => {
      formData.append('file', file.buffer, file.originalname);
    });

    const tatumResp = await fetch('https://api-eu1.tatum.io/v3/ipfs', {
      method: 'POST',
      headers: {
        'x-api-key': '你的Tatum API密钥'
      },
      body: formData
    });

    const data = await tatumResp.text();
    res.send(data);
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.listen(3001, () => console.log('代理服务运行在3001端口'));

React端修改后的调用代码

const form = new FormData();
// 传入实际的File对象，比如从文件输入框获取
form.append("file", document.getElementById('nft-file-input').files[0]);

const resp = await fetch(
  `http://localhost:3001/api/ipfs-upload`,
  {
    method: 'POST',
    body: form
  }
);

const data = await resp.text();
console.log(data);

3. 修正请求头与FormData构造 #

• 确认x-api-key拼写无误，且未添加Tatum未允许的自定义请求头（额外请求头会触发预检请求，若不在允许列表内会引发CORS错误）。
• 原代码中form.append("file", "[object Object]")是错误用法，需传入实际的File对象（用户上传的文件），之前偶然生效属于异常情况，修正后可避免潜在请求问题。

4. 切换Tatum API区域端点 #

尝试切换到其他区域的Tatum API端点，比如https://api-us1.tatum.io/v3/ipfs，不同区域的CORS配置可能存在差异，测试是否能正常调用。

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