跨域测试小工具

https://blockchain-tools.pages.dev/#/cors-checker

截图 workers-dev 出自：/t/862194

import { Box, TextField, Button, Typography } from "@mui/material" import { useState } from "react" import CircularProgress from '@mui/material/CircularProgress' export default function CorsChecker() { const [inputValue, setInputValue] = useState('') const [urlsInfo, setUrlsInfo] = useState<{url: string, cros: string}[]>([]) const [checking, setChecking] = useState(false) async function check() { let _urlsInfo = [] setChecking(true) setUrlsInfo([]) for (const url of inputValue.split('\n')) { if (!url.trim() || _urlsInfo.filter(urlInfo=>{return urlInfo.url===url.trim()}).length>0 ) continue let urlInfo = {url: url.trim(), cros: ''} let res try { res = await fetch(url.trim()) } catch(e) {} if ('cors'===res?.type) { urlInfo.cros = '' } else { urlInfo.cros = '' } _urlsInfo.push(urlInfo) } setChecking(false) setUrlsInfo(_urlsInfo) } return ( <Box display='flex' alignItems='center' justifyCOntent='center' minHeight='62vh'> <Box maxWidth='800px' width='100%'> <Typography variant="h3" compOnent="div" gutterBottom> CORS Checker </Typography> <TextField fullWidth label="One url per line" multiline rows={8} value={inputValue} OnChange={(e)=>setInputValue(e.target.value)} /> <Button OnClick={()=>check()} disabled={checking} variant="contained" className="my-4"> {checking&&<CircularProgress color='inherit' size='1rem' value={50} className='mr-2' />} {checking?'Checking':'Check'} </Button> {urlsInfo.map(urlInfo=>( <div key={urlInfo.url+urlInfo.cros}>{urlInfo.cros} {urlInfo.url}</div> ))} </Box> </Box> ) }