V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
estk
V2EX  ›  前端开发

跨域测试小工具

  •  
  •   estk · 2022-06-26 17:31:59 +08:00 · 775 次点击
    这是一个创建于 917 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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
        1
    liushuigs  
       2022-06-26 18:36:30 +08:00
    谢谢分享,也许后面用得上。我稍做修改做了一个可线上演示的 demo: https://runjs.qingting.work/#/projects/deb7d696c41741e7
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6051 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 02:39 · PVG 10:39 · LAX 18:39 · JFK 21:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.