Add catchit.html - Static JSON fetcher with CORS-aware error handling

[Copilot]

Implements a static HTML page that fetches JSON from a URL and displays it formatted. Supports URL via origin query parameter or document referrer fallback.

Implementation

• URL extraction: Query parameter origin takes precedence, falls back to document.referrer
• JSON fetching: Standard fetch API with Accept header, parses response and displays formatted with 2-space indentation
• Error handling: Detects CORS failures (TypeError on fetch) and HTTP errors, displays specific messages
• UI: Gradient background, centered card layout, dark code block for JSON output

Usage

<!-- With explicit URL -->
catchit.html?origin=https://api.example.com/data

<!-- Uses referrer if no parameter -->
catchit.html

Screenshots

Successful fetch:

CORS error:

No URL:

Notes

CORS requires Access-Control-Allow-Origin headers from target server. Fetch failures are caught and attributed to CORS by error type detection.

Original prompt

Create a static HTML webpage named catchit.html in the root of the repository. The page should:

• Use HTML, CSS, and JavaScript only (no backend).
• Accept a URL as a query parameter named origin, e.g., catchit.html?origin=https://poe.com/GiveQuinnMoney.
• If no origin parameter is provided, attempt to use the document referrer as the URL.
• Perform a fetch request to the obtained URL (assuming it's a GET request that returns JSON).
• Display the fetched JSON response in a simple, readable format on the page.
• Handle potential CORS issues by showing an error message if the fetch fails.
• Keep the design simple and minimalistic.

Note: The server at https://poe.com/GiveQuinnMoney must allow CORS for this to work in the browser. If CORS is blocked, the fetch will fail, and an error will be displayed. Since it works with curl, check if the server sets appropriate CORS headers.

This pull request was created as a result of the following prompt from Copilot chat.

Create a static HTML webpage named catchit.html in the root of the repository. The page should:

• Use HTML, CSS, and JavaScript only (no backend).
• Accept a URL as a query parameter named origin, e.g., catchit.html?origin=https://poe.com/GiveQuinnMoney.
• If no origin parameter is provided, attempt to use the document referrer as the URL.
• Perform a fetch request to the obtained URL (assuming it's a GET request that returns JSON).
• Display the fetched JSON response in a simple, readable format on the page.
• Handle potential CORS issues by showing an error message if the fetch fails.
• Keep the design simple and minimalistic.

Note: The server at https://poe.com/GiveQuinnMoney must allow CORS for this to work in the browser. If CORS is blocked, the fetch will fail, and an error will be displayed. Since it works with curl, check if the server sets appropriate CORS headers.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.