ch-ui cannot connect to my local clickhouse server

[mohammadQBNL]

Environment

NPM build

How did you encounter the bug?

1. npm run preview
2. o + enter to open in browser

3. 

4. It just hangs for a while, says server not available.

When I look at my local clickhouse server logs, soon as I attempt a connection from the ch-ui page I get:

{} <Warning> HTTPServerRequest: Got an HTTP request with no content length and no chunked/multipart encoding, it may be impossible to distinguish graceful EOF from abnormal connection loss
2024.07.12 11:32:06.763730 [ 417752 ] {} <Trace> HTTPHandler-factory: HTTP Request for HTTPHandler-factory. Method: OPTIONS, Address: [::1]:51788, User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36, Content Type: , Transfer Encoding: identity, X-Forwarded-For: (none)

What did you expect?

Establishing a connection, able to see my tables, query, etc.

Actual Result

Just hangs and gives

[caioricciuti]

Hello @mohammadQBNL, a few followup questions...

How are you running click house locally Via docker or you installed via sh? If it's docker please refer to CH docker page (https://hub.docker.com/r/clickhouse/clickhouse-server/) and take a look on the networking tab, maybe the it's a port issue mapping...

Looking at you error message we can define that, the log message warns that an HTTP request was received without specifying the content length or using chunked encoding. This makes it challenging to determine whether the request ended normally or if the connection was lost. The specific request was an OPTIONS request from a local address with no additional content-type or encoding information...

ch-ui doesn't do anything other than connect to Clickhouse server via it's nodeJS package. Please let me know what you get when you access http://localhost:8123/play on your browser directly. Also make sure you can use the /play that's built in..

Also on the top of my head you can try to connect using 127.0.0.1:8123 or 0.0.0.0:8123.

Waiting for the follow-up to see if we can make it work...

[mohammadQBNL]

Hey, thanks for getting back so quickly.

Just running from command line locally (just a quick dev setup, installed with sh, running from ubuntu terminal: ~$ clickhouse-server): Play works fine:

[mohammadQBNL]

oh sorry forgot to mention. tried 0.0.0.0 and 127.0.0.1 to no avail :/

[caioricciuti]

Let's try the following:

1. Other than use the preview mode, can you try npm run dev and see if you can connect there?
2. Are you able to try the docker approach? docker run -p 5521:5521 ghcr.io/caioricciuti/ch-ui:latest?
3. Can you try to connect via your hostname?

   
   hostname

hostname
my.pc.hostname

Then try to connect my.pc.hostname:8123? 

### Click house server tries: 

it seems the issue **might** be related to CORS or networking. So we can go and see the following: 
### CORS Configuration:

Since the OPTIONS request is being received but not processed, one possibility is that CORS is not configured on your server.... To do so do the following: 
ClickHouse configuration:
a. Edit ClickHouse config file (/etc/clickhouse-server/config.xml) - Can be in other dir... But search for it.
b. Add or modify the following section:
```xml
<http_server_default_response>
    <add_http_cors_header>1</add_http_cors_header>
</http_server_default_response>

Restart your ClickHouse server:

service clickhouse-server restart

Networking Configuration:

Make sure that your ClickHouse server is listening on the correct interface and port:

Check your ClickHouse config file for the <http_port> and <listen_host> settings:

<http_port>8123</http_port>
<listen_host>::</listen_host>

b. The<listen_host>::</listen_host> setting allows connections from any IPv6 or IPv4 addresso try changing it to:

<listen_host>0.0.0.0</listen_host>

Again restart the server...

Firewall Settings: Ensure that your firewall is not blocking connections to port 8123: sudo ufw allow 8123/tcp

ch-ui Configuration:

When running ch-ui, make sure you're using the correct connection string. Try: http://localhost:8123 or http://127.0.0.1:8123

Network Tab (it worth the try...)

Attempt to connect using ch-ui and see the network requests. Look for any failed requests or error messages in the response.

ClickHouse Logs: Check the ClickHouse server logs for more detailed error messages: Copysudo tail -f /var/log/clickhouse-server/clickhouse-server.log

Let me know... 💪

[caioricciuti]

So just tested on my pc...

when I run clickhouse server from docker:

docker run -d -p 18123:8123 -p19000:9000 --name some-clickhouse-server --ulimit nofile=262144:262144 clickhouse/clickhouse-server

I can connect on ch-ui

When I do the ./clickhouse serve I get the same error as you, let me know if you tried to edit the settings I sent you on the last comment...

[mohammadQBNL]

will try in a bit and get right back!

[mohammadQBNL]

it worked from docker! Exposed a port and used that in ch-ui; everything else never helped much, though :/. Probably some issue with my setup; worth noting it also wouldn't connect with a clickhouse server instance running on AWS, same exact behavior (that one is also not running in a container). I imagine some issue with my setup. I guess makes sense to close this? I'll also debug some more over Sunday and will note findings here if I get it fixed.

[caioricciuti]

Please let us know if you find out how to fix your setup. It can be something we can add to the docs so if any other user finds at least we know how to solve it!

[caioricciuti]

Hey I found the problem! If you can mark as a solution for any other user...

So the thing is when you do the curl to install click house (docs)

you need to create an file named config.xml on the same directory with the following:

<?xml version="1.0"?>
<clickhouse>
    <logger>
        <level>trace</level>
        <log>./clickhouse-server.log</log>
        <errorlog>./clickhouse-server.err.log</errorlog>
    </logger>

    <http_port>8123</http_port>
    <tcp_port>9000</tcp_port>

    <listen_host>127.0.0.1</listen_host>

    <http_options_response>
        <header>
            <name>Access-Control-Allow-Origin</name>
            <value>*</value>
        </header>
        <header>
            <name>Access-Control-Allow-Headers</name>
            <value>origin, x-requested-with, x-clickhouse-format, x-clickhouse-user, x-clickhouse-key, Authorization</value>
        </header>
        <header>
            <name>Access-Control-Allow-Methods</name>
            <value>POST, GET, OPTIONS</value>
        </header>
        <header>
            <name>Access-Control-Max-Age</name>
            <value>86400</value>
        </header>
    </http_options_response>

    <path>./clickhouse_data/</path>
    <tmp_path>./clickhouse_data/tmp/</tmp_path>
    <user_files_path>./clickhouse_data/user_files/</user_files_path>
    <users_config>users.xml</users_config>
    <default_profile>default</default_profile>
    <default_database>default</default_database>

    <timezone>UTC</timezone>

    <http_server_default_response>
        <add_http_cors_header>1</add_http_cors_header>
    </http_server_default_response>

    <max_concurrent_queries>100</max_concurrent_queries>
</clickhouse>

If you that and run ./clickhouse server --config-file=config.xml

Edit: You'll also need users.xml on the same directory:

<?xml version="1.0"?>
<clickhouse>
    <users>
        <default>
            <password></password>
            <networks>
                <ip>::/0</ip>
            </networks>
            <profile>default</profile>
            <quota>default</quota>
        </default>
    </users>

    <profiles>
        <default>
            <max_memory_usage>10000000000</max_memory_usage>
            <use_uncompressed_cache>0</use_uncompressed_cache>
            <load_balancing>random</load_balancing>
        </default>
    </profiles>

    <quotas>
        <default>
            <interval>
                <duration>3600</duration>
                <queries>0</queries>
                <errors>0</errors>
                <result_rows>0</result_rows>
                <read_rows>0</read_rows>
                <execution_time>0</execution_time>
            </interval>
        </default>
    </quotas>
</clickhouse>

I didn't test but maybe you can add all in the config.xml file

you'll be able to connect! :)

[mohammadQBNL]

Ahh thanks man!! Apologies never found time to debug, it worked!

[gregzuro]

If one already has a config file set up, This fragment from the suggested config.xml, added to mine, fixed the (lack of) connection issue for me:

    <http_options_response>
        <header>
            <name>Access-Control-Allow-Origin</name>
            <value>*</value>
        </header>
        <header>
            <name>Access-Control-Allow-Headers</name>
            <value>origin, x-requested-with, x-clickhouse-format, x-clickhouse-user, x-clickhouse-key, Authorization</value>
        </header>
        <header>
            <name>Access-Control-Allow-Methods</name>
            <value>POST, GET, OPTIONS</value>
        </header>
        <header>
            <name>Access-Control-Max-Age</name>
            <value>86400</value>
        </header>
    </http_options_response>