Vikunja API unreachable when enabling SSL with NPM

[baddhack]

Hello everyone,

I’ve been trying to install Vikunja by setting HTTPS between the clients and my Reverse Proxy for several days now, but I’m getting the following error: “AxiosError: Network Error Please check that the API address is valid.”

I’ve looked at all the possible configurations, I’ve already consulted many posts on this community forum and on others too but I can’t find any solution to my issue, although in some posts some of you have managed to set up an SSL/TLS link.

To be clear, here is an illustration of my installation :

Firstly, this is a test installation, which is why everything is on the same machine. In a real case, I’d like to use a Reverse Proxy on another machine. That’s why I’ve redirected my Nginx Proxy Manager to the main “myserver” host and not directly to the IPs of my containers.

So I want to use Nginx Proxy Manager and deploy the Vikunja stack without the Nginx Vikunja-Proxy.

You’ll notice that I’ve also created aliases for the Vikunja web application and its API in my DNS server.

In this configuration, I’d like the connection between my clients and the Reverse Proxy to be encrypted, and this is not a problem if the rest of the communication between the API and the Frontend is done over HTTP.

(If it’s possible to have a completely encrypted configuration, I’d like to set that up too, but I want to solve my first problem first.)

In my current configuration, everything works perfectly well in HTTP. However, when I set up my internal certificates on the Proxy Host “vikunja.mydomain.com”, Vikunja switches to HTTPS, but it becomes impossible to reach the API. The error that appears is as follows: AxiosError: Network Error Please check that the API address is valid

I don’t understand what the problem is, because as far as I’m concerned, the rest of the communication takes place over HTTP and Nginx Proxy Manager handles the encryption.

To illustrate the error code, here are 2 screenshots of the full HTTP mode and one when I enable SSL on my Proxy Host :

(See next posts please because I have new account restrictions)

To complete that, you will find my docker-compose.yml configuration in the following code :

version: '3'

services:
  db:
    image: mariadb:10
    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    environment:
      MYSQL_ROOT_PASSWORD: supersecret
      MYSQL_USER: vikunja
      MYSQL_PASSWORD: secret
      MYSQL_DATABASE: vikunja
    volumes:
      - ./db:/var/lib/mysql
    restart: unless-stopped
    networks:
      - nginx_proxy_manager_default
  api:
    image: vikunja/api
    environment:
      VIKUNJA_DATABASE_HOST: db
      VIKUNJA_DATABASE_PASSWORD: secret
      VIKUNJA_DATABASE_TYPE: mysql
      VIKUNJA_DATABASE_USER: vikunja
      VIKUNJA_DATABASE_DATABASE: vikunja
      VIKUNJA_SERVICE_JWTSECRET: jwtsecret
      VIKUNJA_SERVICE_FRONTENDURL: http://vikunja.mydomain.com:8081/
      VIKUNJA_LOG_LEVEL: DEBUG
    ports:
      - 3456:3456
    volumes:
      - ./files:/app/vikunja/files
    depends_on:
      - db
    restart: unless-stopped
    networks:
      - nginx_proxy_manager_default
  frontend:
    image: vikunja/frontend
    ports:
      - 8080:80
    environment:
      VIKUNJA_API_URL: http://vikunja-api.mydomain.com:3456/api/v1/
      VIKUNJA_LOG_LEVEL: DEBUG
    restart: unless-stopped
    networks:
      - nginx_proxy_manager_default
networks:
  nginx_proxy_manager_default:
    external: true

I configured the “VIKUNJA_LOG_LEVEL” but I don’t have any more relevant logs.

Also, I tried the following configuration with the Vikunja-Proxy but I couldn’t get it work …

Use Vikunja with SSL certificate

Continuing this from Matrix: The browser will prevent all requests to insecure sites (http) when you acces the frontend via https but not the api. To solve this, you must make the frontend and api available via https. Since you’re hosting Vikunja in the “classic” wvay, you’ll need an nginx config similar to this (adopted from the example in the docs: gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.1; gzip_min_length 2…

Moreover I’ve also tested the following step-by-step documentations, which correspond exactly to what I want to do, but each time I get the same error once SSL has been activated.

(See links on next post please beacause I have new account restrictions)

Finally I ask myself a few questions in all this:

• Is the Vikunja-Proxy essential in my configuration?

In principle, no, because the documentation offers to do without and I can’t see any other use for it apart from making things harder for myself with a double reverse proxy.

• I’ve also read that in this case, both the Backend and Frontend would have to be in HTTPS, but I can’t see how to configure this at the container level.

So if you have any answers, I would be very grateful because I have already spent a lot of time debugging something that is generally quite simple in the first place.

Thank you for reading and for your help.

Have a nice day !

[baddhack]

Here the screenshots of my Vikunja error :

Here the links I already followed :

Full docker example

Setup behind a reverse proxy

[baddhack]

Here a screenshot to show that everything is working fine with SSL disabled :

Sorry for these multiple answers to complete the previous post

[kolaente]

Whoa that graph and debug info looks like it was a lot of effort!

Are you proxying both the api and the frontend through NPM?

@baddhack

and this is not a problem if the rest of the communication between the API and the Frontend is done over HTTP.

Actually, it is, because the browser will reject any connection to a http site you’re trying to make from a site accessed via https. If that’s the problem you should be able to see an error message from the browser in the console (F12).

It looks like you’re accessing the frontend via https but are trying to access the api via http?

@baddhack

I’ve also read that in this case, both the Backend and Frontend would have to be in HTTPS, but I can’t see how to configure this at the container level.

You can either add another proxy in front of the api and the frontend and then proxy that through NPM to handle the TLS termination or configure NPM so that it proxies the api as well as the frontend.

[baddhack]

OMG …

How did I miss this, I’ve read this documentation so many times though …

@kolaente

Actually, it is, because the browser will reject any connection to a http site you’re trying to make from a site accessed via https. If that’s the problem you should be able to see an error message from the browser in the console (F12).

You’re absolutely right!

To illustrate, here’s the error present in my browser (found with F12) :

So I followed the NPM Configuration with method 2 as you told me. I configured it manually through the “Custom locations” in NPM like the following screenshot :

(see next post because I have new user restrictions on media)

To finish (as it is said in step 7), I adjusted the URL on the Vikunja login page to match the proxy address and voilà …

Thank you so much for getting me back on track. I did spend a lot of time on it, but I’ll take something positive out of it, telling myself that it helped me review some essential concepts about HTTPS and Reverse Proxy!

Thanks again, it’s time to use Vikunja now!

[baddhack]

Here is the NPM configuration that I added to my first proxy host vikunja[dot]mydomain[dot]com (see table of the first post) :

[baddhack]

Here a last post just to show that everything is working fine :

Now I can mark the topic as solved

Thanks again @kolaente