EOSJS HTTP CORS error

Question

I'm trying to simply connect to my local EOS block from within a React Component with the following code;

import EOSJS from 'eosjs';

const config = {
    keyProvider: ['INSERT_PRIVATE_KEY_HERE'],
    httpEndpoint: 'http://127.0.0.1:8888',
    expireInSeconds: 60,
    broadcast: true,
    debug: false,
    sign: true
}

const eos = EOSJS.Localnet(config);

eos.getInfo({}, function(err, result) {
    err ? console.log("Error:",err) : console.log("Response:",result);
});

and receiving the following error;

Failed to load http://127.0.0.1:8888/v1/chain/get_block: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

My local EOS blockchain instance is configured as such;

http-server-address = 127.0.0.1:8888
access-control-allow-credentials = false
unlock-timeout = 7400000 #900
producer-name = eosio
enable-stale-production = true

# PLUGINS
plugin = eosio::http_plugin
plugin = eosio::chain_api_plugin
plugin = eosio::history_api_plugin
plugin = eosio::wallet_api_plugin
plugin = eosio::producer_plugin

Executing curl http://127.0.0.1:8888/v1/chain/get_info returns the correct block state and running the exact same javascript code server side through nodejs also works. I'm guessing I need to somehow modify the eosjs library to exclude CORS from http requests, or allow it somehow in my config.ini, but I'm not sure how to.

Answer 1

Just add the below param to your config file:

access-control-allow-origin = "*"

Or you can even run the nodeos command with this parameter, check mine:

nodeos -e -p eosio --plugin eosio::chain_api_plugin --plugin eosio::history_api_plugin --access-control-allow-origin "*" --access-control-allow-headers "*" --access-control-allow-credentials true

Answer 2

Maybe trivial, but try to change the config to localhost instead of 127.0.0.1?

  const config = {
    ...
    httpEndpoint: 'http://localhost:8888',
    ...
  }