Search

Observe a CORS preflight

Observe how a browser asks permission for a method and fields before sending the intended request.

Difficulty
intermediate
Published
July 13, 2026
Last reviewed
Review due
  • cors
  • preflight
  • browsers

Prediction

Adding one fixed non-safelisted request field should make the browser send OPTIONS before the intended request.

Controlled observation

The future UI will show preflight and actual exchanges separately for fixed preview origins, without accepting an Origin value from the user.

Explanation

Preflight asks whether an origin may use the intended method and fields. A successful HTTP response still needs compatible CORS sharing fields.

Controlled exercise

Run this observation

Compare the simple GET with the POST whose fixed non-safelisted field causes a browser OPTIONS preflight.

Ready. No request has run.

Controlled request

Method
GET
URL
https://lab.httpclarity.com/v1/cors-preflight/simple
Permitted headers
None
Body
None

Browser-observed response

No response yet. The explanation and examples remain useful without JavaScript or the Worker.

Timing is browser elapsed time. Fetch hides Set-Cookie, raw wire bytes, reliable compressed size, and some redirect details.

Portable examples

cURL

              'curl' '--include' '--request' 'GET' 'https://lab.httpclarity.com/v1/cors-preflight/simple'

Fetch API

              const response = await fetch("https://lab.httpclarity.com/v1/cors-preflight/simple", {
  "method": "GET"
});
console.log(response.status, await response.text());

PHP

              <?php
$options = ['http' => [
    'method' => 'GET',
    'ignore_errors' => true,
]];
$context = stream_context_create($options);
$body = file_get_contents('https://lab.httpclarity.com/v1/cors-preflight/simple', false, $context);
var_dump($http_response_header, $body);

Need a full API client? Copy the generated cURL command, then import it in Hoppscotch. HTTPClarity sends no request data to Hoppscotch.

Continue in Hoppscotch

Primary sources