React应用加载WalletConnectModal配置文件时遇CORS及404错误求助

Problem Breakdown #

• First click error: Uncaught (in promise) DOMException: Blocked a frame with origin "https://auroncrow.lol" from accessing a cross-origin frame
• Second click behavior: Modal opens and connects successfully, but throws 404 on GET https://rpc.walletconnect.com/v1/profile/reverse/...
• Connected state issue: Clicking the button after connection still opens the connect modal instead of the profile modal
• Context: Works on other apps in the same domain; using an HTML NFT template adapted to React, no backend server.

Fixes & Debugging Steps #

1. Resolve Cross-Origin Frame Block on First Click #

• Check template for frame-blocking code: Look for Content-Security-Policy meta tags in the template with frame-src or child-src directives that restrict iframe access. Adjust these to allow https://*.walletconnect.com.
• Wait for modal initialization: Ensure WalletConnect is ready before allowing button clicks. Use the isReady state from useWeb3Modal to gate the click handler:

  import { useWeb3Modal } from '@web3modal/react';
  
  const { open, isReady } = useWeb3Modal();
  
  const handleClick = async () => {
    if (!isReady) return;
    // Execute open logic here
  };
  

2. Fix 404 on Profile Reverse Fetch #

• Update to WalletConnect v2: The v1 endpoint rpc.walletconnect.com/v1/profile/reverse is deprecated. Verify your package.json uses v2-compatible packages:
  • @web3modal/react (≥2.0.0)
  • @walletconnect/sign-client (matching v2 version)
    Run npm update @web3modal/react @walletconnect/sign-client to get the latest versions.

3. Trigger Profile Modal When Connected #

• Conditionally set modal view: Modify your button's onClick handler to check connection state and open the correct view:

  import { useWeb3Modal, useWeb3ModalAccount } from '@web3modal/react';
  
  const { open } = useWeb3Modal();
  const { isConnected } = useWeb3ModalAccount();
  
  const handleWalletClick = () => {
    open(isConnected ? { view: 'profile' } : {});
  };
  

• Validate provider setup: Ensure your app is wrapped with Web3ModalProvider and initialized with a valid projectId and correct chain configurations to sync connection state properly.

4. Template-Specific Conflicts #

• Isolate template scripts: Temporarily disable non-essential JS from the template (e.g., custom modals, global event listeners) to identify if any are interfering with WalletConnect's iframe.
• Check sandbox attributes: If the template uses iframes elsewhere, remove restrictive sandbox attributes that block cross-origin interactions.

Additional Checks #

• Clear browser cache to eliminate outdated cached scripts.
• Test in incognito mode to rule out interference from privacy extensions or ad blockers.

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