跨域测试小工具

[estk]

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>
  )
}

[liushuigs]

谢谢分享，也许后面用得上。我稍做修改做了一个可线上演示的 demo: https://runjs.qingting.work/#/projects/deb7d696c41741e7