React对接本地IPFS网关上传文件遇CORS错误求助

问题分析 #

你遇到的两个错误对应两个核心问题：

1. CORS跨域限制：React前端运行在http://localhost:5173，IPFS API节点在http://localhost:5001，属于不同端口的跨域请求，浏览器同源策略拦截了请求——因为IPFS节点未返回允许该来源的CORS响应头。
2. 302跳转异常：请求被重定向到/webui/add而非预期的/api/v0/add，大概率是IPFS节点API路径配置异常，或客户端初始化时的参数指向错误。

解决方案 #

1. 配置IPFS节点允许跨域请求 #

修改IPFS配置文件，添加允许的跨域来源、方法和头：

• 找到IPFS配置文件：Linux/macOS在~/.ipfs/config，Windows在%USERPROFILE%\.ipfs\config
• 定位到API下的HTTPHeaders段，替换为以下内容：

"API": {
  "HTTPHeaders": {
    "Access-Control-Allow-Origin": ["http://localhost:5173"],
    "Access-Control-Allow-Methods": ["GET", "POST", "PUT"],
    "Access-Control-Allow-Headers": ["Authorization"]
  }
}

• 重启IPFS节点：执行命令 ipfs daemon --restart

2. 修正IPFS客户端初始化配置 #

显式指定API路径，避免请求跳转到WebUI：

import { create } from 'ipfs-http-client';

const client = create({
  host: 'localhost',
  port: 5001,
  protocol: 'http',
  apiPath: '/api/v0' // 强制指定API端点路径，防止重定向
});

3. 验证修复 #

重启IPFS节点和React开发服务器后重新测试：

• CORS错误会消失，因为IPFS节点已返回允许localhost:5173的响应头
• 302跳转问题会被解决，请求将正确发送到/api/v0/add端点

额外排查点 #

如果问题仍存在：

• 验证IPFS节点状态：访问http://localhost:5001/api/v0/id，正常情况下会返回节点信息
• 检查React项目的代理配置（如Vite/CRA的代理规则），确认未干扰IPFS请求路径

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