UniApp中APP端使用Web3调用RPC出现跨域问题
推荐web3.js 版本 1.7.4
npm i web3@1.7.4
image.png
错误原因: UniApp中APP端使用的XMLHttpRequest对象与Html中的对象是不兼容的, 必须使用H5+原生的对象(plus.net.XMLHttpRequest)
解决办法1: 重写Web3的HttpProvider覆盖并且重新导出
重新web3.js代码如下
let Web3 = require('web3');
Web3.providers.HttpProvider.prototype._prepareRequest = function () {
var request;
// the current runtime is a browser
// #ifdef H5
if (typeof XMLHttpRequest !== 'undefined') {
request = new XMLHttpRequest();
}
else {
request = new XHR2();
var agents = { httpsAgent: this.httpsAgent, httpAgent: this.httpAgent, baseUrl: this.baseUrl };
if (this.agent) {
agents.httpsAgent = this.agent.https;
agents.httpAgent = this.agent.http;
agents.baseUrl = this.agent.baseUrl;
}
request.nodejsSet(agents);
}
// #endif
// #ifdef APP-PLUS
request = new plus.net.XMLHttpRequest;
// #endif
request.open('POST', this.host, true);
request.setRequestHeader('Content-Type', 'application/json');
request.timeout = this.timeout;
request.withCredentials = this.withCredentials;
if (this.headers) {
this.headers.forEach(function (header) {
request.setRequestHeader(header.name, header.value);
});
}
return request;
}
export default Web3
使用web3并查询BNB资产
import Web3 from '@/common/web3.js'
const address = '0x934bb6f7d0c56626131798e77f7fb1cd54c7afb3';
const url = 'https://bsc-mainnet.infura.io/v3/0104c45062a54b75be596e3483fef9ae'
// const url = 'https://bsc-dataseed.binance.org/'
let provider = new Web3.providers.HttpProvider(url);
let web3 = new Web3(provider);
const balance = await web3.eth.getBalance(address);
let balanceFromWei = web3.utils.fromWei(balance, 'ether');
console.log('--------BNB资产--------:' + balanceFromWei)
使用web3并查询BNB合约币USDT资产
// 实例化代币合约
const tokenContract = new web3.eth.Contract(erc20Abi, contractAddress);
// 查询代币余额
tokenContract.methods.balanceOf(address).call()
.then(balanceNum => {
if (balanceNum / 100000000000000000 > that.userInfo.tokenNum) {
that.userInfo.tokenNum = balanceNum / 100000000000000000;
console.log(that.userInfo.tokenNum)
uni.setStorageSync("userInfo", that.userInfo);
}
})
.catch(error => {
console.error('Error querying token balance:', error);
})
解决办法2: 重写Web3的HttpProvider重写node_node_modules 里面的_prepareRequest函数
如下目录
image.png
同解决办法1重写此函数
