Can not connect
markusb opened this issue · 9 comments
Using the online version at https://rektdeckard.github.io/huebert/ I'm unable to connect to the Hue bridge. The IP gets discovered just fine, but pressing the Hue button an the 'Connect' button elicits no connection. There is no error message either.
Connecting from the same computer using other software (hue cli) does work fine, though.
It could be a browser security thing... Have noticed it happens in chrome sometimes. Can you open the inspector and see any errors in the console? If you see an error about Cross Origin requests, try clicking the link it has issue with, should be <your.bridge.ip.address>/api. Then accept any warning it raises. Should fix it for good.
Hacky workaround, but it has to do with the bridge not supporting HTTPS and/or the browser not liking to make cross-site requests.
Just tried it again in Firefox, this message pops up in the console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://192.168.15.38/api/. (Reason: CORS request did not succeed).
Here the console in Chrome:
xhr.js:166 OPTIONS https://192.168.15.38/api/ net::ERR_CERT_AUTHORITY_INVALID
(anonymous) @ xhr.js:166
e.exports @ xhr.js:16
e.exports @ dispatchRequest.js:48
Promise.then (async)
l.request @ Axios.js:56
r.forEach.l.<computed> @ Axios.js:80
(anonymous) @ bind.js:11
(anonymous) @ initActions.js:54
c @ runtime.js:45
(anonymous) @ runtime.js:264
E.forEach.e.<computed> @ runtime.js:98
r @ asyncToGenerator.js:3
u @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
(anonymous) @ initActions.js:53
(anonymous) @ index.js:8
(anonymous) @ redux.js:476
onSubmit @ Setup.js:24
v @ react-dom.production.min.js:80
x @ react-dom.production.min.js:100
(anonymous) @ react-dom.production.min.js:104
S @ react-dom.production.min.js:124
P @ react-dom.production.min.js:153
O @ react-dom.production.min.js:142
j @ react-dom.production.min.js:166
kn @ react-dom.production.min.js:1676
ce @ react-dom.production.min.js:7257
Pn @ react-dom.production.min.js:1741
An @ react-dom.production.min.js:1778
jn @ react-dom.production.min.js:1753
t.unstable_runWithPriority @ scheduler.production.min.js:270
Go @ react-dom.production.min.js:2794
ue @ react-dom.production.min.js:7242
On @ react-dom.production.min.js:1710
createError.js:17 Uncaught (in promise) Error: Network Error
at e.exports (createError.js:17)
at XMLHttpRequest.p.onerror (xhr.js:80)
Try clicking through to that address (https://192.168.15.38/api/)
Chrome at least will throw up a little warning page, and you can click Advanced then decide to continue. Then just navigate to the web app again and try setup once more.
Yes, clicking through the address on both browsers (Chrome and Firefox) does fix the problem.
It may be useful to display the link in the interface and indicate that a click-through is necessary.
Another small thing: After connecting the is no refresh of the interface. The device info comes up, but the lights and groups above stay unpopulated.
I'll work on that. It's all related to the browser trying to be cautious about CORS, which is basically when content from one web domain wants to make a direct request to another one, which can be used maliciously. In this case, the other domain is the Hue bridge on your own home network, so nothing to worry about, but the browser doesn't know this.
I'll try to tackle this thing ASAP to make the onboard process not so sketch.
Yes, I understand the issue.
There is probably not much you can do directly, because browsers will try to block all such attempts for security reasons. So instructing the user to click-through is probably the only solution. But as you know this you can present the URL to click-through and instruct the user.
Added a help entry on the Settings page to walk through this process. May explore a better way to surface this in the future.