Как заставить Web3js работать внутри компонента VueJS?

Я хочу использовать web3 с узлом и vuejs для подключения к узлу Ethereum Parity.

  • Я использую vue-cli с webpack.
  • Паритет работает на локальном хосте.
  • Когда я посещаю http://localhost:8545, я вижу, что говорит мне, что Parity слушает.

введите здесь описание изображения

Я создал следующий компонент Vue:

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <h2>{{ accounts() }}</h2>
  </div>
</template>

<script>
  import Web3 from 'web3'

  export default {
    name: 'hello',
    http: {
      root: '/root',
      headers: {
        AccessControlAllowOrigin: 'true'
      }
    },
    data () {
      return {
        title: 'web3.js App'
      }
    },
    methods: {
      accounts: function () {
        const ethereumUri = 'http://localhost:8545'   // 8540, 8545, 8180

        let web3 = new Web3(new Web3.providers.HttpProvider(ethereumUri))

        if (!web3.isConnected()) {
          return 'Unable to connect to ethereum node at ' + ethereumUri
        } else {
          let accounts = web3.eth.accounts
          return accounts
        }
      }
    }
  }
</script>

Когда я запускаю npm run dev, я получаю это:

введите здесь описание изображения

В консоли вижу это:

введите здесь описание изображения

Я попытался добавить заголовок Access-Control-Allow-Origin, используя этот код конфигурации, но это не помогло. Ошибка консоли, по-видимому, указывает на то, что узлу четности необходимо установить этот параметр заголовка.

    http: {
      root: '/root',
      headers: {
        AccessControlAllowOrigin: 'true'
      }
    },

person nu everest    schedule 14.04.2017    source источник
comment
Вы должны разрешить междоменные запросы на вашем сервере.   -  person Egor Stambakio    schedule 15.04.2017
comment
Я думал, что это то, что должны делать мои настройки http: {headers: {}}.   -  person nu everest    schedule 15.04.2017
comment
Документы Parity говорят, что вы можете сделать это: [rpc] cors = "*" hosts = ["*"].   -  person Egor Stambakio    schedule 15.04.2017


Ответы (1)


Решение состояло в том, чтобы создать файл конфигурации Parity с именем config.toml.

Расположение файла:

  • Windows: %UserProfile%\AppData\Roaming\Parity\Ethereum\config.toml
  • Linux: ~/.local/share/io.parity.ethereum/config.toml
  • macOS: $HOME/Library/Application Support/io.parity.ethereum/config.toml

Содержимое файла:

[parity]
#  Test Network 
chain = "ropsten"

[rpc]
# Allows Cross-Origin Requests from domain '*'. 
cors = "*"
# Allow connections only using specified addresses. 
hosts = ["", "http://localhost:8080"]

Ссылка:

Спасибо wostex за комментарий.

person nu everest    schedule 15.04.2017