如何修复Cosmos RPC Endpoint CORS错误？@cosmjs dApp开发请求失败

问题背景 #

基于@cosmjs开发JUNO链dApp，调用SigningCosmWasmClient.connectWithSigner获取签名客户端时，出现TypeError: Failed to fetch错误，报错栈指向Tendermint客户端检测版本阶段的HTTP请求失败，更换多个RPC节点仍无法解决。

报错栈信息：

TypeError: Failed to fetch
    at http (http://localhost:3000/static/js/bundle.js:53443:12)
    at HttpClient.execute (http://localhost:3000/static/js/bundle.js:53471:65)
    at Tendermint34Client.detectVersion (http://localhost:3000/static/js/bundle.js:55135:35)
    at Tendermint34Client.create (http://localhost:3000/static/js/bundle.js:55128:33)
    at Tendermint34Client.connect (http://localhost:3000/static/js/bundle.js:55115:33)
    at SigningCosmWasmClient.connectWithSigner (http://localhost:3000/static/js/bundle.js:23403:64)
    at http://localhost:3000/static/js/bundle.js:127476:51
    at Generator.next (<anonymous>)
    at fulfilled (http://localhost:3000/static/js/bundle.js:462877:24)

错误截图：

解决方案 #

1. 修正链配置不匹配问题 #

你的代码中使用了Cosmos Hub（cosmoshub-4）的配置，但实际需要连接JUNO链，链配置不匹配会导致节点兼容性问题。替换为JUNO链的正确配置：

import { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
import { GasPrice }from "@cosmjs/stargate";

// JUNO链主网配置示例
const config = {
  chainName: "Juno",
  chainId: "juno-1",
  rpcEndpoint: "https://rpc-juno.itastakers.com",
  restEndpoint: "https://lcd-juno.itastakers.com",
  addressPrefix: "juno",
  microDenom: "ujuno",
  coinDecimals: 6,
  gasPrice: "0.025",
};

// 后续代码保持不变
await window.keplr?.enable(config.chainId);
const offlineSigner= window.getOfflineSigner?.(config.chainId);
const account = await offlineSigner?.getAccounts();
let wasmChainClient = null;
if (offlineSigner) {
  try {
    wasmChainClient = await SigningCosmWasmClient.connectWithSigner(
      config.rpcEndpoint,
      offlineSigner,
      {
        gasPrice: GasPrice.fromString(`${config.gasPrice}${config.microDenom}`),
      }
    );
  } catch (e) {
    console.error("wallets", e);
  }
}
const result= {
  account: account?.[0],
  client: wasmChainClient,
};

console.log(result)

2. 检查RPC节点的CORS配置 #

浏览器环境下的dApp受跨域资源共享（CORS）限制，若RPC节点未允许http://localhost:3000的跨域请求，会触发Failed to fetch：

• 优先选择支持CORS的公开JUNO RPC节点，可从JUNO官方文档或社区渠道获取可靠节点列表
• 本地开发时，可自行搭建JUNO节点并添加CORS配置：启动节点时加入参数--rpc.cors_origin="http://localhost:3000"

3. 验证RPC节点可用性 #

先手动测试RPC节点是否正常响应：

curl https://rpc-juno.itastakers.com/status

若请求失败，说明节点不可用，更换其他节点即可。

4. 确保CosmJS版本与链节点兼容 #

JUNO链的Tendermint版本需与@cosmjs包版本匹配，可尝试更新至最新兼容版本：

npm install @cosmjs/cosmwasm-stargate@latest @cosmjs/stargate@latest

5. 同步Keplr钱包的JUNO链配置 #

若使用Keplr钱包，需确保钱包已添加JUNO链的完整配置，可通过代码手动添加：

await window.keplr?.experimentalSuggestChain({
  chainId: "juno-1",
  chainName: "Juno",
  rpc: "https://rpc-juno.itastakers.com",
  rest: "https://lcd-juno.itastakers.com",
  bip44: {
    coinType: 118,
  },
  bech32Config: {
    bech32PrefixAccAddr: "juno",
    bech32PrefixAccPub: "junopub",
    bech32PrefixValAddr: "junovaloper",
    bech32PrefixValPub: "junovaloperpub",
    bech32PrefixConsAddr: "junovalcons",
    bech32PrefixConsPub: "junovalconspub",
  },
  currencies: [
    {
      coinDenom: "JUNO",
      coinMinimalDenom: "ujuno",
      coinDecimals: 6,
    },
  ],
  feeCurrencies: [
    {
      coinDenom: "JUNO",
      coinMinimalDenom: "ujuno",
      coinDecimals: 6,
      gasPriceStep: {
        low: 0.01,
        average: 0.025,
        high: 0.04,
      },
    },
  ],
  stakeCurrency: {
    coinDenom: "JUNO",
    coinMinimalDenom: "ujuno",
    coinDecimals: 6,
  },
});

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