maxm-httpstatusbehavior.web.val.run
Readme

HTTP Status Behavior

In a bunch of iframes, how does Val Town (cloudflare) handle getting various HTTP status responses.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";
// dprint-ignore
const httpStatusCodes: number[] = [
100, 101, 102, 103, // 1xx Informational
200, 201, 202, 203, 204, 205, 206, 207, 208, 226, // 2xx Success
300, 301, 302, 303, 304, 305, 306, 307, 308, // 3xx Redirection
400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418, 421, 422, 423, 424, 425, 426, 428, 429, 431, 451, // 4xx Client Error
500, 501, 502, 503, 504, 505, 506, 507, 508, 510, 511 // 5xx Server Error
];
export default async function(req: Request): Promise<Response> {
const url = new URL(req.url);
if (url.pathname === "/") {
return new Response(
renderToString(
<div className="container" style={{ display: "flex", flexWrap: "wrap" }}>
{httpStatusCodes.map(code => (
<div>
<p>
<a href={`/${code}`}>{code}</a>
</p>
<iframe height="300px" src={`/${code}`} />
</div>
))}
</div>,
),
{
headers: { "content-type": "text/html" },
status: 200,
},
);
}
let status = parseInt(url.pathname.substring(1) || "200");
return new Response(
renderToString(
<>
<p>This is a response page with a status of {status}</p>
<p>
<img
style={{ maxWidth: "100%" }}
src={`https://maxm-imggenurl.web.val.run/picture-of-the-number-${status}`}
/>
</p>
</>,
),
{ status: status, headers: { "Content-Type": "text/html" } },
);
}
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
v31
May 28, 2024