How to access local node via browser when no CORS header is set?

[DerFuchs]

Hey there.

I am a n00b trying to understand Jellyfish and I stumbled upon a problem I am unable to solve.

What I'd like to implement is a function for https://blockping.defichain-masternode-monitor.com (and probably https://www.defichain-masternode-monitor.com) where the user can have a look at currently waiting transactions. My idea was to implement that by accessing mempool from the local wallet via jellyfish.

I was able to manage to perform requests to the local wallet that by running Jellyfish as a node.js script. That's very easy, good work!

However, I can't use Jellyfish via browser because the DeFiChain node's RPC does not include CORS (Cross Origin Resouce Sharing, https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) HTTP headers.
Browsers will not perform any further request or data from http://localhost:8554 until they receive a "Access-Control-Allow-Origin: *" header from the node's answer and within the prior HTTP OPTIONS request.

I may be just too dumb, but how should I ever be able to use jellyfish from the browser when nodes do not deliver these HTTP headers?
Is there a solution? Will there be a public node infrastructure (Ocean?) addressing this problem?

Thank you in advance,
Michael

[frankred]

Struggeling with the same problem. I want to create a web app using jellyfish.

new Client('http://localhost:8554') is not working (POST http://localhost:8554/ net::ERR_CONNECTION_REFUSED)
new Client('https://ocean.defichain.com/') is not working too. (CORS)

What application do I have to run for using localhost:8554. Is there a jellyfish server application I have to start?

[fuxingloh]

Hey, this issue comment might help: #232 (comment)

For connection to your local defichain app node, you need the full URL to do that. It's somewhere in your defi config directory. A URL should look something like this: http://${user}:${password}@127.0.0.1:${port}/. Make sure you don't expose this information beyond your secured environment.

Other another note, a few things about jellyfish that might help understand where the ecosystem is heading

• Jellyfish itself is a project that features the entire implementation of the blockchain code from C++ to JavaScript without the consensus to power light implementation
• jellyfish-api-core and jellyfish-api-jsonrpc which y'all are trying to connect to is an RPC protocol layer in the node, basically defid node.
• There are 20+ packages within this ecosystem that does other things other than the above.
• ocean.defichain.com infrastructure is another project that features easy to use hosted API client https://github.com/DeFiCh/whale

I have to admit, everything is not well documented at the moment, and things aren't clear. We are working on just that now, we are also going to consolidate all sparse projects into one with helpful samples #580

[DerFuchs]

Hey Fuxing,

thank you for your reply! I really appreciate your work for DeFiChain and hope to see you more often on YouTube :)

However, let's talk about the problem.

I do understand now that Jellyfish might not be designed for such a purpose we @frankred and me intended to use it for. Whale might be the more suitable one.

I can only speak for me in this case: What I'd like to have is an easy-to-use JS package which enables me to request data from the chain. Since Ocean seems to be kind of a public node, this might be the one to choose for the remote part. Is there any usable package for requesting data from Ocean that right now? Is that the Whale package?
If not, how can we connect to Ocean using a Browser? Is there any Kind of REST API? There seems to be at least one endpoint right now: "https://ocean.defichain.com/v0.9/mainnet/stats"

---

If you're interested in the problem, there's a little explanation. Maybe you can add a hint to the documentation that browsers will not establish a connection to any given node because of that.

My understanding so far is that jellyfish is capable of connecting to a local wallet like this:

import {Client, MiningInfo} from '@defichain/jellyfish'

const client = new Client('http://localhost:8554')
const info: MiningInfo  = await client.mining.getMiningInfo()

That's running super smooth when I am using a node.js script, no problem at all.

But the problem we have stays the same:

Browsers will not establish a connection to a remote when this host does not provide CORS HTTP headers.

For example:
There's a website at https://cool-domain.com. On this website, there's a JavaScript running wich wants to perform an XHR (AJAX) Request to https://another-cool-domain.com. The browser will now perform an HTTP OPTIONS request beforehand to determine what's possible. Although the request might deliver a correct answer, the browser will also look for Access-Control-Allow-Origin in the HTTP reply's header data.

As long as https://another-cool-domain.com does not provide that header, any browser on any device will deny any further connection to that host.

It might be an easy thing to provide that header when performing RPC requests. But that's a thing which has to be implemented in the node software.

[fuxingloh]

@DerFuchs I will be working on a sample app this week that uses the ocean infrastructure, I think we need that badly now.

For CORS there is two way to approach this:

1. You can use a middleware API Gateway e.g. Nginx to route the traffic.
2. Or enable the param -rpcallowcors that were included in Native CORS support for defichain DeFiCh/ain#330

Directly exposing your RPC API to the browser is typically not a great idea as you are exposing other sensitive wallet API in the process. I would suggest adding another middleware layer where you whitelist and route valid traffic to the RPC layer.

Browser
   v
API (e.g. express node server with COR middleware)
   v
Defid (don't enable COR to prevent accidental access)

[DerFuchs]

@fuxingloh A sample app would be amazing!

I decided not to implement the described feature. You're absolutely right that a node should not be exposed in such a way. I'll wait until ocean and whale are getting useful :)

[fuxingloh]

Hey sorry for the very late reply, I included 2 very very basic examples of the use of ocean API namely accessing DEX & Masternode data.

https://github.com/DeFiCh/jellyfish/tree/main/examples

Over the weeks/months depending on my resources, I aim to complete a series of articles detailing how to:

• accessing full node data via jellyfish-api-core with API gateway
• how to create a transaction from scratch
• how to build your own trading bot with jellyfish ecosystem
• how to build your own block explorer with Ocean API
• how to build your own address explorer with Ocean API
• how to build with own light wallet with jellyfish ecosystem

Ocean API is very comprehensive but sadly lacking the documentation to support the use, which will also be worked on very soon.

[DerFuchs]

Already took a look on that. Thank you. I'll have to wait for more examples/documentation :D