shadcn.io is not affiliated with official shadcn/ui
CORS Error Log by Cause Block for React Aria
Blocked cross-origin requests in four cause bands with counts, shares and origin chips, a select that narrows every band to one origin, and a collapsible fix holding the response header to copy.
Installation
Overview
Go from a blocked request to the header that fixes it with this CORS log for React with React Aria. It is Allowline, a cross-origin diagnostics tool, and its header is worked out from the counts: how much of the total one origin causes. In a hairline frame with a plus mark on each corner, four cause bands (missing allow-origin, method not allowed, wildcard with credentials, header not allowed) each show a count and share bar, the origins behind it as outline Badges with their counts, and a Collapsible fix with one sentence and the header to send. A copy button copies the header. A select in the header narrows every band to one origin. The tool reads blocked requests and configures nothing. Guides draw the frame and its bands; the entrance is CSS only. For API teams and front-end teams debugging cross-origin failures.
FAQ
How do I use my own log?
Edit ORIGINS and CAUSES: each cause has its blocked requests per origin in the order of ORIGINS, a name and the sentence of its fix. Counts, shares, chips and the header sentence are derived.
Where does the header in the fix come from?
headerLinesOf builds it from the cause and the origin that sent the most blocked requests under the current filter. It is a suggestion to review, not a policy to paste without thought.
What does the Origin select do?
It narrows every band to one origin and the counts, shares and header sentence re-derive. A band with nothing from that origin stays in place and says so, so the panel keeps its height.