search

gurucomputing / headscale-ui

A web frontend for the headscale Tailscale-compatible coordination server
BSD 3-Clause "New" or "Revised" License
1.79k stars 128 forks source link

Not able to make the ui talk to headscale server #172

Closed simtcrom closed 1 month ago

simtcrom commented 1 month ago

My setup is,

headscale server running on a linux server. I verified that I can make external network clients connect to it using tailscale client. API key is generated. I verified that API key is working by running a sample curl command as below curl -k -X 'GET' -H "Authorization: Bearer xxxxx" -H 'accept: application/json' 'https://myhost:port/api/v1/node'

I built headscale-ui code using npm run build and placed he build folder contents under /var/www/html/web/ folder I can access the headscale-ui using http://myhost:port/web Basically headscale ui is hosted on the same server where headscale is running/

In the settings tab entered Headscale URL as https://myhost:port and Headscale API Key as the one I earlier tested. When I click Test Server Settings button, the green mark not turning green, Any thoughts?

Below is what chrome developer tools shows when I click Test Server Settings button,

image

routerino commented 1 month ago

If curl is working but headscale ui isn't, it's 100% going to be CORS.

Make sure both the UI and headscale are served on the same subdomain. Yes you need to use a reverse proxy. Different ports count as different subdomains (you shouldn't be referring to ports at all).

simtcrom commented 1 month ago

If curl is working but headscale ui isn't, it's 100% going to be CORS.

Make sure both the UI and headscale are served on the same subdomain. Yes you need to use a reverse proxy. Different ports count as different subdomains (you shouldn't be referring to ports at all).

Headacale server and ui running on same server on different ports. I did not understand what is CORS issue?

What is the solution you are recommending?

AndDiSa commented 1 month ago

I have siimilar issues with releases after 2024.02.24-beta1. I just migrated to headscale 0.23 and I wanted to update headscale-ui, too, but as soon as I am using 2024.10.05 or 2024.10.10 I am receiving only 502 errors from the headscale-ui.

routerino commented 1 month ago

If curl is working but headscale ui isn't, it's 100% going to be CORS. Make sure both the UI and headscale are served on the same subdomain. Yes you need to use a reverse proxy. Different ports count as different subdomains (you shouldn't be referring to ports at all).

Headacale server and ui running on same server on different ports. I did not understand what is CORS issue?

What is the solution you are recommending?

The same solution that is on the front page of the readme, use a reverse proxy to merge the subdomains. The concept of reverse proxies is a well documented one that doesn't need to be explained here.

You will need a reverse proxy to install headscale-ui on your domain. Here is an example Caddy Config to achieve this:

routerino commented 1 month ago

I have siimilar issues with releases after 2024.02.24-beta1. I just migrated to headscale 0.23 and I wanted to update headscale-ui, too, but as soon as I am using 2024.10.05 or 2024.10.10 I am receiving only 502 errors from the headscale-ui.

Not the same issue, the default ports changed in the latest major release. I'll update the front page readme to make that change more apparent.