Enable CORS on local node server?

[amreus]

Is it possible to allow Cross Origin Resource Sharing when running a node wiki locally?

I'm starting the server using the command: tiddlywiki.js <dir> --listen

[Joshua Fontany]

CORS errors are a problem when the javascript you are running is being run from within the Browser, but is trying to access a resource that is not on the "same domain" as the document you are viewing.

As long as you 100% make sure that your code is running on the _Server_ (node.js), it can then make any modifications to the Wiki files you need. This will then be picked up the next time the browser syncs with the server.

Best,
Joshua Fontany

[amreus]

Thanks Joshua,

I did figure enough of it it out to get a working bookmarklet. I had to add the right headers to the server.js file and put handler file.

I'm not an expert but I think it is safe enough.  The code is a bookmarklet which calls the WebServer API .  The result is I can press my bookmarklet button on any page and have a tiddler created from the web page info. Kind of cool but I'm not sure how useful it really is.  I think I'm motivated by curiosity and the challenge more than the utility.

Here's the bookmarklet as of now:

  function () {

    var e = encodeURIComponent;

    var t = document.title;

    var u = window.location.href;

    var data = JSON.stringify({ "tags": "Link", "url": u });

    var xhr = new XMLHttpRequest();

    xhr.open('PUT', 'http://127.0.0.1:8080/recipes/default/tiddlers/' + t);

    xhr.setRequestHeader('x-requested-with', 'TiddlyWiki');

    xhr.onreadystatechange = function () {

      if (xhr.readyState === 4) {

        console.log('xhr.status: ' + xhr.status);

        console.log('xhr.responseText: ' + xhr.responseText);

      }

    };

    xhr.send(data);

  })();

[Joshua Fontany]

Excellent work! I've been following you progress. I will definitely use something like this in my Bookmarks plugin.

Has this been tested in multiple browsers? I also really like how this opens up the possibility to write tiddlers to a wiki-tab while your browser has another tab or content in view. Mahalo (thanks)!

Best,
Joshua Fontany

[amreus]

Thank you. I could use a lot of help with everything. I'm not a programmer - I  just play around with things sometimes. The javascript is all very hacky and it would be nice to offer the cors as an option instead of having it hard-coded.  I can share what I have on github if you or anyone else is interested.

I have not tried anything other than Firefox on Windows 10.

Here's an image of the fields I am grabbing.  I decided to hide the tiddlers as system tiddlers and use the caption field for display. Also changed to using the URL as the unique identifier instead of the html title tag.

There is a major downside - since you can't catch CORS errors in javascript, I'm not sure how to notify the user if the bookmarking fails for that reason.  Specifically there is a problem with bookmarking Github pages - they are blocking the javascript and I get an error: " Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”)." I'm not sure if that can be overcome yet.

But over-all I'm happy with how well it works.  Just browse and click to bookmark.  Then use all of the tools available in TiddlyWiki to organize your bookmarks. It's slightly less convenient than the built-in bookmarks library but vastly more powerful.

[amreus]

I've been testing this using Jed's BobWin.exe on Windows. It works the same without the need to modify the server so I think I'm going to target Bob as the server. instead of the TiddlyWiki node server.

(There's currently a bug in bob that the created and modified fields are incorrect.)

Here's a basic bookmarklet for a bob server:

javascript: (

  function () {

    var data = { tiddlers: {'0': {'fields': {'title': window.location.href,'caption': document.title }}}};

    var tid = JSON.stringify(data);

    var xhr = new XMLHttpRequest();

    const wikiname = 'bookmarks';

    xhr.timeout = 10000;

    xhr.onreadystatechange = function () {

      console.log('xhr.readyState: ' + xhr.readyState);

      console.log('xhr.status: ' + xhr.status);

      console.log('xhr.responseText: ' + xhr.responseText);

      console.log('xhr.statusText: ' + xhr.statusText);

    };

    xhr.open('POST', `http://127.0.0.1:8080/api/push/${wikiname}`);

    xhr.send(tid);

  })();

[Jed Carty]

This isn't a bug in Bob, it works as intended.

If the behaviour isn't what you want or expect you can put a feature request on GitHub that clearly states your request. The guidelines for bugs and feature requests are here https://ooktech-public.gitlab.io/guidelines/

[amreus]

Apologies Jed - it just didn't meet my exceptions.  Hope I didn't waste too much of your time.

But after some thought, it turns out for my purpose (bookmarking directly to a wiki via a bookmarklet) there is no need to enable CORS. TiddlyWiki's default node server works just fine. I'll document in another topic.

[amreus]

In my previous post, I meant "expectations" not "exceptions."  As in "The fact that the API didn't do what I expected does not mean it's a bug."