簡單寫以太坊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