已部署Hyperledger Fabric网络，如何将Web/React应用连接至JavaScript链码？

你已经完成Fabric网络和链码部署，接下来要实现React前端与链码的交互，核心思路是通过Node.js中间层API中转（浏览器无法直接调用Fabric的gRPC接口），具体步骤如下：

1. 搭建Node.js中间层API #

初始化项目并安装依赖 #

mkdir fabric-api && cd fabric-api
npm init -y
npm install express cors fabric-network @hyperledger/fabric-ca-client

编写API核心逻辑 #

创建server.js，实现链码的查询与提交交易接口：

const express = require('express');
const cors = require('cors');
const { Gateway, Wallets } = require('fabric-network');
const path = require('path');

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

// 加载Fabric连接配置和钱包路径
const ccpPath = path.resolve(__dirname, '..', 'test-network', 'organizations', 'peerOrganizations', 'org1.example.com', 'connection-org1.json');
const walletPath = path.join(process.cwd(), 'wallet');

// 查询链码数据接口
app.get('/api/query', async (req, res) => {
    try {
        const gateway = new Gateway();
        await gateway.connect(ccpPath, {
            wallet: await Wallets.newFileSystemWallet(walletPath),
            identity: 'user1', // 替换为你的测试用户身份
            discovery: { enabled: true, asLocalhost: true }
        });

        const network = await gateway.getNetwork('mychannel'); // 替换为你的通道名称
        const contract = network.getContract('mychaincode'); // 替换为你的链码名称

        // 调用链码查询方法，替换为你实际的链码方法名
        const result = await contract.evaluateTransaction('queryAllAssets');
        res.json(JSON.parse(result.toString()));
        await gateway.disconnect();
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

// 提交链码交易接口
app.post('/api/submit', async (req, res) => {
    try {
        const gateway = new Gateway();
        await gateway.connect(ccpPath, {
            wallet: await Wallets.newFileSystemWallet(walletPath),
            identity: 'user1',
            discovery: { enabled: true, asLocalhost: true }
        });

        const network = await gateway.getNetwork('mychannel');
        const contract = network.getContract('mychaincode');

        // 调用链码提交方法，替换为你实际的方法名和参数
        const result = await contract.submitTransaction('createAsset', req.body.id, req.body.value);
        res.json({ message: '交易提交成功', result: result.toString() });
        await gateway.disconnect();
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

app.listen(3001, () => {
    console.log('Fabric API服务运行在http://localhost:3001');
});

导入测试用户身份到钱包 #

进入test-network目录，将测试用户身份导入本地钱包：

cd test-network
# 生成user1身份材料并导入钱包（可复用测试网络脚本）
./scripts/createPeerAdminCard.sh
# 若脚本不适用，可参考Fabric官方示例编写Node.js脚本导入身份

2. React前端调用API #

在React项目中安装请求工具 #

npm install axios

编写React组件示例 #

创建FabricAsset.js组件，实现数据查询和交易提交：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const FabricAsset = () => {
    const [assets, setAssets] = useState([]);
    const [assetId, setAssetId] = useState('');
    const [assetValue, setAssetValue] = useState('');

    // 页面加载时查询链码数据
    useEffect(() => {
        axios.get('http://localhost:3001/api/query')
            .then(res => setAssets(res.data))
            .catch(err => console.error(err));
    }, []);

    // 提交交易并刷新数据
    const submitTransaction = () => {
        axios.post('http://localhost:3001/api/submit', {
            id: assetId,
            value: assetValue
        })
        .then(res => {
            alert(res.data.message);
            axios.get('http://localhost:3001/api/query').then(res => setAssets(res.data));
        })
        .catch(err => console.error(err));
    };

    return (
        <div>
            <h2>Fabric资产列表</h2>
            <ul>
                {assets.map(asset => (
                    <li key={asset.ID}>{asset.ID}: {asset.Value}</li>
                ))}
            </ul>
            <div>
                <input 
                    type="text" 
                    placeholder="资产ID" 
                    value={assetId} 
                    onChange={(e) => setAssetId(e.target.value)} 
                />
                <input 
                    type="text" 
                    placeholder="资产值" 
                    value={assetValue} 
                    onChange={(e) => setAssetValue(e.target.value)} 
                />
                <button onClick={submitTransaction}>创建资产</button>
            </div>
        </div>
    );
};

export default FabricAsset;

3. 关键注意事项 #

• 跨域配置：确保Node.js后端启用CORS，避免React前端请求被浏览器拦截
• 网络访问：后端服务器需要能访问Fabric节点的gRPC端口（默认7051），测试环境下确认端口未被防火墙拦截
• 身份安全：所有Fabric身份信息（密钥、证书）仅保存在后端，前端通过API间接交互，绝不暴露敏感信息
• 链码方法匹配：确保API中调用的链码方法名、参数与你部署的JavaScript链码完全一致

内容的提问来源于stack exchange，提问作者MD. MOHIMUL ALAM