Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

CORS Policies Dashboard Block for React

Six allowed origins with an editor for methods, headers, credentials and max-age, and a preflight preview that shows the response headers a server would send or why the request is blocked.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Check what a browser will be told before it asks, with this CORS policies panel for React with Base UI. A hairline frame with a plus mark on each corner lists six allowed origins at the start, one of them a wildcard that matches any preview subdomain. Choosing an origin opens its editor: the methods as toggle pills, the allowed headers in a Tags Input, a Switch for credentials and a Native Select for how long a browser may cache the answer. A field adds an origin after checking its shape. The preview band takes an origin, a method and a header and shows the six response headers the server would send in a definition list, or "Blocked: origin not allowed" and why the method or header fails. Editing a policy re-runs the last preview. The Preview button is a Shine Button. For API gateways and developer consoles.

FAQ

How do I fill it with my origins?

Edit POLICIES. Each has an origin (exact, or with a * label such as https://*.preview.wicketgate.example), the allowed methods, the allowed headers in lower case, a credentials flag and a maxAge in seconds. The list, the editor and the preview all read the same array.

How is the origin matched?

An exact origin wins first. Otherwise the first wildcard whose start and end fit the origin and whose middle is a non-empty host part with no slash wins, so a preview host matches the wildcard and the bare domain does not. If nothing matches, the preview is blocked with "origin not allowed". A method or header that the matched policy does not list blocks it with its own reason.

Why does the answer name the origin when credentials are on?

A browser refuses a wildcard in the allowed origin when credentials are sent, so a policy echoes the request's own origin and adds Vary: Origin so caches keep one answer per origin. The preview shows exactly that, and shows the credentials header as "not sent" when the switch is off.

What stays local, and how do I wire it for real?

The policies, edits and previews are all in this page and nothing is saved or sent. To make it real, load the policies from your gateway, write changes back through its API and keep the matching function so the preview agrees with what the server answers.

How do I add and remove headers?

Type a header name and press Enter, or paste a comma separated list; names are lower-cased and a duplicate or a name with a space is refused with a line in the status area. The delete button on a tag removes it. The tags belong to the chosen origin only.

How does it look on a phone?

The origin list, the editor and the preview stack in that order. The preview's four fields stack and its headers read one under another, each name above its value.

All 200 dashboard blocks