[github/bastienwirtz/homer.git] / docs / troubleshooting.md

# Troubleshooting

## My custom service card doesn't work, nothing appears or offline status is displayed (pi-hole, sonarr, ping, ...)

You might by facing a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
(Cross Origin Request Sharing) issue. It happens when the targeted service is
hosted on a different domain or port. Web browsers will not allow to fetch
information from a different site without explicit permissions (the targeted
service must include a special `Access-Control-Allow-Origin: *` HTTP headers).
If this happens your web console (`ctrl+shift+i` or `F12`) will be filled with
this kind of errors:

```text
Access to fetch at 'https://<target-service>' from origin 'https://<homer>' has
been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
on the requested resource. If an opaque response serves your needs, set the
request's mode to 'no-cors' to fetch the resource with CORS disabled.
```

To resolve this, you can either:

* Host all your target service under the same domain & port.
* Modify the target server configuration so that the response of the server
included following header- `Access-Control-Allow-Origin: *`
(<https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests>). It
might be an option in the targeted service, otherwise depending on how the
service is hosted, the proxy or web server can seamlessly add it.
* Use a cors proxy server like
[`cors-container`](https://github.com/imjacobclark/cors-container),
[`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others.
Commit	Line	Data
7129af3b BW	1	# Troubleshooting
	2
	3	## My custom service card doesn't work, nothing appears or offline status is displayed (pi-hole, sonarr, ping, ...)
	4
1d6d20e7 ES	5	You might by facing a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
	6	(Cross Origin Request Sharing) issue. It happens when the targeted service is
	7	hosted on a different domain or port. Web browsers will not allow to fetch
	8	information from a different site without explicit permissions (the targeted
	9	service must include a special `Access-Control-Allow-Origin: *` HTTP headers).
	10	If this happens your web console (`ctrl+shift+i` or `F12`) will be filled with
	11	this kind of errors:
7129af3b BW	12
7129af3b BW	13	```text
1d6d20e7 ES	14	Access to fetch at 'https://<target-service>' from origin 'https://<homer>' has
	15	been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
	16	on the requested resource. If an opaque response serves your needs, set the
	17	request's mode to 'no-cors' to fetch the resource with CORS disabled.
7129af3b BW	18	```
	19
	20	To resolve this, you can either:
	21
	22	* Host all your target service under the same domain & port.
1d6d20e7 ES	23	* Modify the target server configuration so that the response of the server
	24	included following header- `Access-Control-Allow-Origin: *`
	25	(<https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests>). It
	26	might be an option in the targeted service, otherwise depending on how the
	27	service is hosted, the proxy or web server can seamlessly add it.
	28	* Use a cors proxy server like
	29	[`cors-container`](https://github.com/imjacobclark/cors-container),
	30	[`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others.