web3.js跨源請求解決方案
阿新 • • 發佈:2018-12-10
在基於以太坊進行DAPP開發中,會使用到web3.js與以太坊時行互動,當產品釋出時會使用公共以太坊結點,因產品的域名和公共以太坊結點域名不一致,出現瀏覽器跨域問題,瀏覽器會出現如下錯誤資訊:
已攔截跨源請求:同源策略禁止讀取位於 https://ropsten.infura.io/<your-key>的遠端資源。
(原因:CORS 請求未能成功)。
可使用代理ropsten網路已解決問題,操作如下:
一、開發環境配置(vue+webpack)
proxyTable: { '/<your-key>': { target: 'https://ropsten.infura.io', changeOrigin: true } },
二、生產環境配置
1、
web3 = new Web3.providers.HttpProvider('http://yourhost/<your-key')
2、配置Nginx
location /<you-key> { if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; # # Custom headers and headers various browsers *should* be OK with but aren't # add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; # # Tell client that this pre-flight info is valid for 20 days # add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain; charset=utf-8'; add_header 'Content-Length' 0; return 204; } if ($request_method = 'POST') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; } #proxy_pass_header Server; #proxy_set_header Host $http_host; #proxy_redirect off; #proxy_set_header X-Real-IP $remote_addr; #proxy_set_header X-Scheme $scheme; proxy_pass https://ropsten.infura.io/<your-key>; }