JSON file of charge information

[karlwilcox]

Modify the existing catalog generator code to also produce something like:

{ "charges": [{ "name": "lion head erased", "category": "lion", "features": ["armed", "langued"], "crown": true, "gorged": false, "proper": null, "credit": "http://www.vikinganswerlady.com/Stars/Heraldry_SVG_Images/index.htm", "image": "/catalog/lion/lion-head-erased.png" }, { "name": "antelope passant", "category": "animal", "features": [], "crown": false, "gorged": false, "proper": null, "credit": "http://heraldicart.org/ Antelop Statant.svg", "image": "/catalog/animal/antelope-passant.png" }] }

[ericscheid]

Looks good. I could certainly use that to drive a javascript thing for picking/displaying charges.

I suppose there could also be sibling entries to "charges" later for "ordinaries", "edges", and "treatments".

[karlwilcox]

Slightly modified version now live at /catalog/catalog.json. Should be self-explanatory, but can provide a description document if needed.

[ericscheid]

Any chance of activating the the CORS policy on the http-server?

Access to fetch at 'https://drawshield.net/catalog/catalog.json' from origin 'https://example.com' 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.

I'm currently exploring the no-cors option too.

[karlwilcox]

I think I’ve done the necessary changes to the Apache config to allow cross origin requests so please have another go. If it doesn’t work let me know and I’ll read the docs again!

[ericscheid]

this is still producing a CORS blocking error.

fetch ('https://drawshield.net/catalog/catalog.json');

I'll try testing using a proxy to fetch it in the meantime.

[karlwilcox]

Sorry about that, I’m a bit vague on this CORS stuff. As far as I’m aware it only applies to AJAX requests, opening the file in a browser (or downloadingit with something like wget / curl) should work fine. There’s no great need to access a “live” version, it will never be updated more than once a day and in reality much less frequently than that. But I will go back and re-read the docs to see if I can fix it!

[karlwilcox]

Another thought, it might not be my server enforcing the CORS thing but the AWS CDN that it uses. I’ll exclude catalog.json from the CDN so it is always served from the actual server…

[ericscheid]

Ideally the resource would also have either an Expires header or max-age or similar cache control headers.

I believe the default for the javascript fetch() API is to do the polite thing

• “default” means use the default behavior of browsers when downloading resources. The browser first looks inside the HTTP cache to see if there is a matching request. If there is, and it is fresh, it will be returned from fetch(). If it exists but is stale, a conditional request is made to the remote server and if the server indicates that the response has not changed, it will be read from the HTTP cache. Otherwise it will be downloaded from the network, and the HTTP cache will be updated with the new response. -- (some random but old web page I only just now found. caveat lector.)

[karlwilcox]

Another thought, if you want to bypass the CDN and access the actual server directly you can try http://18.130.163.224/catalog/catalog.json Not sure if that will make a difference…

[ericscheid]

Hmm .. the actual server is not on SSL, and my thing is, so I'm hitting a different error there. Not to worry, rolled up a simple PHP proxy utility, and using that works =)

OK, I now have an array in my js with the current catalog.

I see your catalog.json file has headers to support caching — but my proxy is not returning them, which means the js fetch() will not be using the browser cache and avoiding a hit thru to your server. A bit more fiddling on my end I think.