CORS and browser access
Load artwork from any origin, read render diagnostics from script, and keep the secret half of a key out of the browser.
Artwork loads in a page on any domain, and fetch() succeeds from any origin. Images
are served with access-control-allow-origin: *. The data API sends the same header
and accepts a CORS preflight.
Canvas access
Drawing GymAssets artwork into a <canvas> requires the crossorigin attribute.
Without it the canvas is tainted, and toDataURL() and getImageData() throw:
<img
src="https://cdn.gymassets.dev/v1/pk_…/body/male/front.webp?primary=pectorals"
crossorigin="anonymous"
alt="Chest muscles highlighted"
/>The image displays correctly either way. The failure appears only when script reads the pixels back, which is a confusing place to meet it.
Diagnostic headers
Script can read a response header only where it is named in
access-control-expose-headers. The render routes name these:
| Header | Reports | Sent by |
|---|---|---|
x-muscles-not-drawn | Requested ids the sheet does not draw | Musclegram render |
x-muscles-unknown | Requested ids that are not muscle ids | Musclegram render |
x-width-clamped | The width asked for and the width served | Musclegram render |
x-art-status | The state of the requested artwork | Equipment render |
x-quota-status | Allowance degradation | Both render routes |
A Musclegram request reports a partial result on a 200. These headers are the only
way to tell a render that highlighted nothing from one that highlighted everything.
Server-side requests
A browser is permitted to send the secret half of a key to the data API, which sends
access-control-allow-headers: authorization.