What Is CORS? A Beginner's Guide with Amazon API Gateway

http://localhost:5173
└─┬─┘  └───┬───┘ └┬┘
 scheme  hostname  port

Access-Control-Allow-Origin: http://localhost:5173

async function bookFakeTicket() {
  const response = await fetch("https://api.example.com/tickets", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      eventId: "missing-headers-live",
      quantity: 1,
    }),
  });

  if (!response.ok) {
    throw new Error(`Booking failed: HTTP ${response.status}`);
  }

  const booking = await response.json();
  console.log(booking.confirmation);
}

bookFakeTicket().catch(console.error);

OPTIONS /tickets HTTP/1.1
Host: api.example.com
Origin: http://localhost:5173
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://localhost:5173
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: content-type

HTTP/1.1 201 Created
Content-Type: application/json
Access-Control-Allow-Origin: http://localhost:5173

{"confirmation":"FAKE-ENCORE-001"}

API_BASE='https://YOUR_API_ID.execute-api.YOUR_REGION.amazonaws.com'
curl -i -X OPTIONS "$API_BASE/tickets" \
  -H 'Origin: http://localhost:5173' \
  -H 'Access-Control-Request-Method: POST' \
  -H 'Access-Control-Request-Headers: content-type'

Help me build a beginner CORS lab using Agent Toolkit for AWS and
current AWS documentation. Explain each step as we go.

Use my learning project in the new AWS experience. Confirm the project,
assigned Region, supported services, and permissions. Explain the
resources and expected costs before deployment.

Create a local concert-ticket page at http://localhost:5173 and an
Amazon API Gateway HTTP API with explicit GET /events and POST /tickets
routes backed by Lambda. Return made-up events and fake confirmations.
Use JSON for POST. No real purchases, personal data, database, or sign-in.
Label the button "Book a fake ticket".

Start with CORS unconfigured. Serve the frontend through a local web
server, and call the AWS API directly without a development proxy.
Manage AWS resources as infrastructure as code and include cleanup.
Keep AWS credentials out of browser code.

Before fixing CORS, show me the JSON POST working from the terminal.
Then help me try it from the page and inspect OPTIONS in browser
Network tools. Verify that this failed preflight prevents POST.

Configure HTTP API CORS for exactly http://localhost:5173, GET and POST,
content-type, no credentials, and max age 0 while testing.
Repeat the browser request. Show me OPTIONS, POST, the response CORS
header, and the fake confirmation displayed by the page.

Serve the same page on port 5174 and call the same API. Explain why
that origin fails. Don't change the allowed list to make it pass.
Report what we actually observed and what we haven't tested.

Give me a short explanation of why CORS doesn't authenticate a user.
Then walk me through deleting this lab's resources, including leftover
logs or deployment artifacts, and verify what's still present.