Hledger: Allow Cross-Origin in hledger-web

[MisterY]

I am at the point where I'm connecting to hledger-web JSON API endpoints from Cashier. At the Sync page, I'm using http://localhost:5000 server URL.
As expected, the error pops up:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5000/accounts. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Would it be possible to add the CORS header, so that a PWA can connect to a locally-run server (on the same machine)?
I would suggest to use the '*' spec, allowing all sources to access the API:
Access-Control-Allow-Origin: *
Open to discussion.

Some references

• Access-Control-Allow-Origin

[MisterY]

Perhaps using a parameter to allow this specifically would be a good idea? The server startup can be scripted, anyway, so it is possible to type this only once in the script.
Also, providing the cors value (*, or an explicit domain, i.e. https://cashier.alensiljak.ml in this case) to the parameter would be a good option.

[simonmichael]

I guess this will be useful for others as well ? A startup option sounds ok, and/or allowing it when base url is localhost. PR welcome.

[MisterY]

I guess this will be useful for others as well ?

Depends on what exactly you mean by that. Cashier, as a PWA, is intended to be a replacement for native applications. There is no compilation, no packages, no stores/markets, etc. It can run on mobile devices as well as desktops. The browser support for PWAs is still in the early stages but on mobile devices, especially Chrome, the whole app can be stored offline and ran just like a native app.

The original intention for the app was to copy/paste plain text or exchange text files with content: accounts, payees go into the app, transactions go out of the app.
Hledger-web opens up an option to actually synchronize the app with one's own data server. The server may be run locally, but not necessarily. If your main device is your phone, then it is not going to be localhost until Haskell is ported to Termux (at least on Android; iOS users - good luck). A nice scenario would be that one comes home, where a hledger-web server is run on a desktop/server, and the phone synchronizes the data over local network.

Perhaps this clarifies a little to whom this option would be useful. Anyone who uses "Add to home screen" option in their browser, will have an offline app on their device. On desktops, unfortunately, this does not work (yet) and the application has to be used online. However, I see the desktop usage useful only for imediate data entry and synchronization/export.

For the synchronization option to work, CORS headers must be present in the server component (hledger-web), otherwise none of these clients, which are running in a browser, will be able to connect to the API endpoint. Native apps do not have this limitation but that's a small price to pay for the portability, speed of development, etc. of the Progressive Web Applications.

I will try to see if I can understand how web server works in Haskell although I'd rather spend that time on getting the Cashier to a useful state. I'm looking to replace a native Android app with this and am already tempted to start using it. Just need to add a quick export option, hopefully tonight.

[simonmichael]

Good info. In summary, I'm reading it as: hledger-web/hledger-api must provide CORS headers to be usable by other web apps.

It will be a small code change, I would guess in Main.hs or Application.hs. Resources:

https://stackoverflow.com/questions/15774833/allowing-cross-origin-requests-in-yesod https://stackoverflow.com/questions/15774833/allowing-cross-origin-requests-in-yesod
http://hackage.haskell.org/package/wai-cors http://hackage.haskell.org/package/wai-cors
https://stackoverflow.com/questions/41399055/haskell-yesod-cors-problems-with-browsers-options-requests-when-doing-post-req https://stackoverflow.com/questions/41399055/haskell-yesod-cors-problems-with-browsers-options-requests-when-doing-post-req
https://github.com/simonmichael/hledger/blob/master/hledger-web/Hledger/Web/Main.hs#L70 https://github.com/simonmichael/hledger/blob/master/hledger-web/Hledger/Web/Main.hs#L70
https://github.com/simonmichael/hledger/blob/master/hledger-web/Hledger/Web/Application.hs https://github.com/simonmichael/hledger/blob/master/hledger-web/Hledger/Web/Application.hs

[MisterY]

Correct. I provided some expanded info as an overview. This really has the potential to uproot many typical desktop applications. Especially the type of which we're talking about here.
And, running both on desktop and mobile with a single codebase is a huge advantage in terms of effort required to maintain it.
Thanks for the pointers. I'll see if I can run -web with the interpreter.

[MisterY]

Ref:

• wai-cors package
• using-wai-cors-package in Yesod Cookbook

[MisterY]

Changes required:

• wai-cors in hledger-web/package.yaml
• Application.hs, import Network.Wai.Middleware.Cors and line 42, (logWare . simpleCors) <$> toWaiApp foundation

Thanks, @simonmichael !
The Cashier PWA on a public domain can now access hledger-web on localhost:5000!

[agarciamontoro]

I managed to allow CORS with @MisterY suggestion. Is any PR adding these changes on the way? I am willing to add this change if nobody else is working on it.

[simonmichael]

Hi @agarciamontoro, that would be great. Noone else is working on it.