简单写以太坊DApp,调用以太坊API的三个坑
- 一、Access-Control-Allow-Credentials错误
- 二、geth中的web版本过低
- 三、hex转string/UTF8中文乱码
一、Access-Control-Allow-Credentials错误
Access to XMLHttpRequest at *** from origin *** has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Credentials’ header in the response is ‘’ which must be ‘true’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
根据字面意思可以知道,这是请求被阻止,由于Access-Control-Allow-Credentials不是true。这是浏览器出于安全考虑,对于跨域请求的限制。
网上有很多教程,叫你把代码写到哪个里面去,对于我这种对前端不熟悉的人,不知道往哪写。后面查到了一个简单解决方法,地址如下:
https://www.cnblogs.com/laden666666/p/5544572.html
谷歌版本号49以前的:
右击谷歌浏览器图标,点开属性,在快捷方式里面的目标后面增加如下内容:
--disable-web-security
谷歌版本号49以后的:
新建一个文件夹C:\Data(无论在哪都可以,这里只做示例),同样右击谷歌浏览器图标,点开属性,在快捷方式里面的目标后面增加如下内容:
--disable-web-security --user-data-dir=C:\Data(刚刚新建文件夹的位置)
保存即可。再次点桌面快捷方式,发现谷歌浏览器书签全部没了,浏览器上方会提示安全问题,这代表你已经运行成功了。后面就可以通过web3在前端对以太坊进行操控。
二、geth中的web版本过低
geth中web3默认版本为 0.20.*。而在网上直接搜web3,出来的都是1.0版本,这个两个版本有些操作不同,而且1.0版本比0.20版本多了很多命令,尝试升级也不行。比如对数据签名,1在web3 0.20中,操作是
地址在前,数据在后。而在web3 1.0中恰好相反
数据在前,地址在后。
同样版本不一致,也导致了第三个坑。
三、hex转string/UTF8中文乱码
以太坊中,很多数据都要求转为hex格式的数据,而我们想要的数据是中文。当我尝试将Tx中的Input转回中文时,利用web3.toAscii转出来都是乱码,然后利用web3.utils.hexToUtf8(hex),发现这个命令根本走不通,因为这个命令是web3 1.0才有的。而在web3 0.20版本中,不存在这个命令,也不存在其它命令将hex格式转为UTF8。我就上网搜,有很多代码,但是都没用,很多都是将hex格式转为ascii。直到我找到了这个哥们的文章。
https://blog.csdn.net/CHENYUFENG1991/article/details/81259248
这个哥们没贴代码,我就把代码贴出来。直接把这段加在js或者html文件中就可以了。
encodeUtf8: function (str) {
var tempstr = ''
try{
tempstr = decodeURIComponent(str.replace(/\s+/g, '').replace(/[0-9a-f]{2}/g, '%$&'));
}
catch(err){
for (b = 0; b<str.length; b = b+2){
tempstr = tempstr +String.fromCharCode(parseInt(str.substr(b, 2),16));
}
}
return tempstr
}
参考资料:
1、https://www.cnblogs.com/laden666666/p/5544572.html
2、https://blog.csdn.net/CHENYUFENG1991/article/details/81259248