htmx/test/manual/cors.html
2025-12-31 12:33:56 -07:00

57 lines
1.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta name="htmx-config" content='{"logAll":true}'>
<script src="../../src/htmx.js"></script>
<style>
body {
font-family: system-ui, sans-serif;
max-width: 800px;
margin: 2rem auto;
padding: 1rem;
}
h1 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
button {
padding: 0.5rem 1rem;
font-size: 1rem;
cursor: pointer;
}
output {
display: block;
margin-top: 1rem;
padding: 1rem;
background: #f5f5f5;
border-radius: 4px;
white-space: pre-wrap;
font-family: monospace;
font-size: 0.875rem;
}
output:empty {
display: none;
}
</style>
<script>
document.addEventListener('htmx:config:request', function(evt) {
// Clear htmx headers for CORS requests
if (evt.detail.ctx.request.mode === 'cors') {
evt.detail.ctx.request.headers = {};
}
});
</script>
</head>
<body>
<h1>CORS Request Test</h1>
<p>This button makes a cross-origin request to the GitHub API using <code>mode: cors</code> configuration.</p>
<button
hx-get="https://api.github.com/users/1cg"
hx-config="mode: cors"
hx-target="#result">
Fetch GitHub User @1cg
</button>
<output id="result"></output>
</body>