bastienwirtz / homer

A very simple static homepage for your server.
https://homer-demo.netlify.app/
Apache License 2.0
9.07k stars 769 forks source link

Ping Feature always show Offline #695

Open antrax2024 opened 12 months ago

antrax2024 commented 12 months ago

Hi, i have one switch with ESP32 , its basically turn on off light. But this is embedded system with web server running on port 8080.

I put this on my config and homer show always offlline.

  - name: "ESP32 - Despensa"
    icon: "fa-solid fa-toggle-on"
    subtitle: "Interruptor"
    url: "http://192.168.1.4:8080/update"
    target: "_blank"
    type: "Ping"

I would like homer show the true status to my server .

Configuration If applicable, copy related homer yaml configuration here.

---
# Homepage configuration
# See https://fontawesome.com/v5/search for icons options

title: "My Dashboard"
subtitle: "Gordo Roliçu"
logo: "assets/icons/bunequinho.png"
#icon: "fa-solid fa-shield-dog" # Optional icon

header: false
footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.

defaults:
  layout: list # Either 'columns', or 'list'
  colorTheme: dark # One of 'auto', 'light', or 'dark'

stylesheet:
  - "assets/custom.css"  

# Optional theme customization
theme: default
colors:
  light:
    highlight-primary: "#fff5f2"
    highlight-secondary: "#fff5f2"
    highlight-hover: "#bebebe"
    background: "#12152B"
    card-background: "rgba(255, 245, 242, 0.8)"
    text: "#ffffff"
    text-header: "#fafafa"
    text-title: "#000000"
    text-subtitle: "#111111"
    card-shadow: rgba(0, 0, 0, 0.5)
    link: "#3273dc"
    link-hover: "#2e4053"
    background-image: "../assets/wallpaper-light.jpeg" # Change wallpaper.jpeg to the name of your own custom wallpaper!
  dark:
    highlight-primary: "#181C3A"
    highlight-secondary: "#181C3A"
    highlight-hover: "#1F2347"
    background: "#12152B"
    card-background: "rgba(24, 28, 58, 0.8)"
    text: "#eaeaea"
    text-header: "#7C71DD"
    text-title: "#fafafa"
    text-subtitle: "#8B8D9C"
    card-shadow: rgba(0, 0, 0, 0.5)
    link: "#c1c1c1"
    link-hover: "#fafafa"
    background-image: "../assets/wallpaper.jpeg"

# Optional navbar
# links: [] # Allows for navbar (dark mode, layout, and search) without any links
links:
  - name: "Contribute"
    icon: "fab fa-github"
    url: "https://github.com/bastienwirtz/homer"
    target: "_blank" # optional html a tag target attribute
  - name: "Wiki"
    icon: "fas fa-book"
    url: "https://www.wikipedia.org/"
  # this will link to a second homer page that will load config from additional-page.yml and keep default config values as in config.yml file
  # see url field and assets/additional-page.yml.dist used in this example:
  #- name: "another page!"
  #  icon: "fas fa-file-alt"
  #  url: "#additional-page" 

# Services
# First level array represent a group.
# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
services:
  - name: "Serviços"
    icon: "fas fa-cloud"
    items:
      - name: "NOKIA GPON Gateway"
        logo: "assets/icons/router.png"
        #subtitle: "Bookmark example"
        keywords: "router network"
        url: "http://192.168.1.254/"        
        target: "_blank" # optional html a tag target attribute

      - name: "ESP32 - Despensa"
        icon: "fa-solid fa-toggle-on"
        subtitle: "Interruptor"
        url: "http://192.168.1.4:8080/update"
        target: "_blank"
        type: "Ping"

      - name: "Speedtest"
        #logo: "assets/icons/esp32.png"
        icon: "fa-solid fa-network-wired"
        subtitle: "Teste de Velocidade"
        url: "https://www.speedtest.net/pt"
        target: "_blank"

  - name: "Sites"
    icon: "fa-solid fa-satellite"
    items:
      - name: "Whatsapp"
        #logo: "assetfs/icons/router.png"
        icon: "fa-brands fa-whatsapp"
        #subtitle: "Bookmark example"
        keywords: "router network"
        url: "https://web.whatsapp.com/"
        target: "_blank" # optional html a tag target attribute

      - name: "Youtube"
        icon: "fa-brands fa-youtube"
        #subtitle: "Bookmark example"
        url: "https://www.youtube.com/"
        target: "_blank" # optional html a tag target attribute

      - name: "Gmail"
        icon: "fa-regular fa-envelope"
        #subtitle: "Bookmark example"
        url: "https://mail.google.com/mail/u/0/#inbox"
        target: "_blank" # optional html a tag target attribute

  - name: "Notícias"
    icon: "fa-solid fa-newspaper"
    items:
      - name: "Google Notícias"
        icon: "fa-brands fa-google"
        url: "https://news.google.com/home?hl=pt-BR&gl=BR&ceid=BR:pt-419"
        target: "_blank" # optional html a tag target attribute

      - name: "Flipboard"
        icon: "fa-brands fa-flipboard"
        url: "https://about.flipboard.com/?noredirect=en_US"
        target: "_blank" # optional html a tag target attribute

      - name: "Feedly"
        icon: "fa-solid fa-rss"
        url: "https://feedly.com/i/my"
        target: "_blank" # optional html a tag target attribute        

  - name: "Compras"
    icon: "fa-solid fa-shop"
    items:
      - name: "Amazon"
        #logo: "assetfs/icons/router.png"
        icon: "fa-brands fa-amazon"
        #subtitle: "Bookmark example"
        keywords: "router network"
        url: "https://www.amazon.com.br/"
        target: "_blank" # optional html a tag target attribute

      - name: "Shopee"
        icon: "fa-solid fa-cart-shopping"
        url: "https://shopee.com.br/"
        target: "_blank" # optional html a tag target attribute        

      - name: "Mercado Livre"
        icon: "fa-solid fa-store"
        url: "https://www.mercadolivre.com.br/"
        target: "_blank" # optional html a tag target attribute                

      - name: "Puff House"
        icon: "fa-solid fa-cloud"
        url: "https://www.puffshouse.com/"
        target: "_blank" # optional html a tag target attribute
iay commented 11 months ago

I have the same problem. I've only recently started using Homer so this could just be a setup issue in my case.

I'm using the latest Docker container and any use of type: Ping results in an offline indication.

surtarso commented 11 months ago

I have this problem but oddly enough it happens with all PC's and mobiles on my home, except my PC. My PC shows 'online' and custom stats as they should. But opening homer on any other device in my home, even my wife's PC on the same network with same configs... they all show offline. Homer is on a dedicated server in my home network, not on my PC or my PC is a server in any way, just to clarify. wife pc image my pc image

royto commented 11 months ago

Did you try to use GET method instead of default method HEAD ?

add method: "get" in your config like

  - name: "ESP32 - Despensa"
    icon: "fa-solid fa-toggle-on"
    subtitle: "Interruptor"
    url: "http://192.168.1.4:8080/update"
    target: "_blank"
    type: "Ping"
    method: "get"
iay commented 11 months ago

The "get" method doesn't make a difference for me.

I did manage to get the green light to come on by referencing the Homer deployment (pinging the same thing I'm browsing). Eventually that clued me into looking at the requests in the browser inspector; it looks like the browser is failing the requests:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxx.xxx.xxx/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

I think this means that, as set up, the Ping type is going to fail on any domain other than the origin domain which doesn't include an Access-Control-Allow-Origin header. I tested this by adding the following to the .htaccess of a site I happen to control:

Header set Access-Control-Allow-Origin "*"

Putting the exact origin scheme, host name and port in there worked too.

That's not really a solution, obviously, more of an observation.

Searching around for "vuejs cors check" seems to imply that adding mode: "no-cors" to the fetch call in Ping.vue might help with this, but we're really far outside my zone of competence at this point.

iay commented 11 months ago

Well, searching the Homer issues for "CORS" is pretty illuminating; this seems to be a well-known (or at least frequently encountered) issue for all of the custom services.

Solutions presented seem to be to add CORS headers to any backend service you control or run a proxy which adds CORS headers.

iay commented 11 months ago

Covered in the troubleshooting doc: https://github.com/bastienwirtz/homer/blob/main/docs/troubleshooting.md

surtarso commented 11 months ago

I see where the CORS could be an issue. I still don't understand why it all works on my pc only. Homer is on dedicated server on my home network... my pc is no more special than any other pc in or mobile in the house. All pcs and mobiles, even using vpn, show offline. My pc magically shows online on everything like I posted above. So it cant be a cors problem to all pcs but mine, right?

iay commented 11 months ago

I still don't understand why it all works on my pc only.

I am curious to know why you have one lucky machine. Different browser or different browser settings, perhaps?

I haven't seen that anywhere in my network: everything shows offline, on all browsers on all machines, unless I set up a CORS proxy. That turned out not to be too hard (there are several that are available as Docker images) but it all seems like more complication than I really need.

surtarso commented 11 months ago

I use firefox on all devices... only mine is the 'lucky machine'... I just installed chrome here and yeah, all offline. same pc same network... the one that shows online on firefox

nthduy commented 11 months ago

To fix the CORS problem you can try to use a proxy container, they mentioned it in the project doc but it is not very clear on how to do it so i give it a shot to explain it here. I am using docker-compose to deploy all my services including homer, taking the project provided docker-compose.yml as an example, we will add the proxy container as a service exposed at port 3000

version: "2"
services:
  homer:
    image: b4bz/homer
    #To build from source, comment previous line and uncomment below
    #build: .
    container_name: homer
    volumes:
      - /your/local/assets/:/www/assets
    ports:
      - 8080:8080
    user: 1000:1000 # default
    environment:
      - INIT_ASSETS=1 # default
  cors-container:
    image: imjacobclark/cors-container
    ports:
      - 3000:3000
    restart: on-failure

In your config.yml update the endpoint of your ping service to have the machine ip of the one that host the proxy container as the prefix.

For example

     - name: "My Service"
        url: "http://192.168.1.202:4000"
        target: "_blank"
        type: "Ping"
        endpoint: "http://192.168.1.202:3000/http://192.168.1.202:4000"

I hope this helps, but please let me know if you need anything else or if you have any other questions.

mirekmal commented 11 months ago

It works fine for 90% of my devices. However I have few, that do not work as expected:

      - name: "UPC Horizon"
        logo: "assets/tools/upc.png"
        subtitle: "UPC Horizon PVR"
        tag: "IoT"
        url: "http://192.168.52.9"
        target: "_blank"
        endpoint: "http://192.168.52.21:3000/http://192.168.52.9"
        type: "Ping"
      - name: "Denon AVR"
        logo: "assets/tools/denon.png"
        subtitle: "Denon AVR-S750H"
        tag: "IoT"
        url: "https://192.168.52.47:10443"
        target: "_blank"
        endpoint: "http://192.168.52.21:3000/https://192.168.52.47:10443"
        type: "Ping"
      - name: "Maranz Model 30"
        logo: "assets/tools/marantz.png"
        subtitle: "Marantz Model 30 & SACD 30n"
        tag: "IoT"
        url: "http://192.168.52.57"
        target: "_blank"
        endpoint: "http://192.168.52.21:3000/http://192.168.52.57"
        type: "Ping"

I can open corresponding web pages properly, but all are marked as ofline. When I try to open web pages direclty in a browser, via CORS provy, I get following errors: For UPC Horizon:

401 -
HTTP 401 - Unauthorized

Authorization is required to access the configuration server.

You must enter the correct username and/or password.

But I'm even not sked to log on...

For Denon:

Error: self signed certificate

This seems to be browser error... but it works perfectly fine when connecting directly, so why is self signed certificate rejected? Is this rejection of CORS proxy or Homer?

And for Marantz:

403 - Error 403: Forbidden Access Forbidden

Again some authorization issue...

So in all cases it seems like there is sort of authorisation error... but why is that? Shouldn't Homer, in case of simple ping, just listen to response? If there is any response (even error) it should be recognized that device is up. Unlike more complex services, when some data is accessed API and presented on a tile, here there should be simple check of response, regardless of response.

almulder commented 11 months ago

I am getting the same issue, all local ip addresses show offline, but if I connect to one that is accessible outside with a web address it shows online then, but not the local ip version