CORS request simulator — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 CORS request simulator</h1>
    <p class="pg-sub">
      You're <code>https://app.example.com</code>, calling an API on a different origin.
      Pick a request shape, a credentials setting, and the server's CORS config — then send it
      and watch exactly what the browser does step by step.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Request shape</div>
      <div class="seg" id="bodySeg" role="group" aria-label="Content type">
        <button data-val="simple" aria-pressed="true">text/plain (simple)</button>
        <button data-val="json" aria-pressed="false">application/json (preflighted)</button>
      </div>
      <p class="hint">A safelisted content type is sent directly. <code>application/json</code> is not
        on the safelist, so the browser asks permission first with an <code>OPTIONS</code> preflight.</p>

<label class="toggle" style="margin-top:10px">
        <input type="checkbox" id="creds" /><span class="switch"></span>
        <span>Send cookies (<code>credentials: "include"</code>)</span>
      </label>
      <p class="hint">Requires the server to allow credentials explicitly — and to name your
        exact origin, never a wildcard.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Server's CORS configuration</div>
      <div class="seg" id="serverSeg" role="group" aria-label="Server CORS header">
        <button data-val="none" aria-pressed="true">No CORS header</button>
        <button data-val="star" aria-pressed="false"><code>*</code></button>
        <button data-val="match" aria-pressed="false">Exact match</button>
        <button data-val="mismatch" aria-pressed="false">Wrong origin</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="works">Worked example: it works</button>
        <button class="btn sm" data-preset="wildcard-creds">Worked example: the wildcard trap</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Send it</div>
      <div class="btn-row">
        <button class="btn primary" id="send">Send request</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>

<div class="flow" id="flow" style="margin-top:14px">
        <span class="box" id="f-origin">app.example.com</span>
        <span class="arrow">→</span>
        <span class="box" id="f-preflight">preflight?</span>
        <span class="arrow">→</span>
        <span class="box" id="f-server">server</span>
        <span class="arrow">→</span>
        <span class="box" id="f-js">your JS</span>
      </div>

<div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick a config and send.</span>
      </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.