类型错误：尝试在 javascript 中获取资源时出现网络错误

Question

我一直在 JavaScript 中使用 API。 API 的作用 - 我们将 URL 发送到 API，它会将缩短的 URL 和响应作为对象发回。

{
  "ok": true,
  "result": {
      "code": "KCveN",
      "short_link": "shrtco.de/KCveN",
      "full_short_link": "https://shrtco.de/KCveN",
      "short_link2": "9qr.de/KCveN",
      "full_short_link2": "https://9qr.de/KCveN",
      "share_link": "shrtco.de/share/KCveN",
      "full_share_link": "https://shrtco.de/share/KCveN",
      "original_link": "http://example.org/very/long/link.html"
  }
}

但就我而言，它显示了 TypeError。 它在控制台中的 catch 上方显示错误。

我也无法访问发回的数据。

我的代码

import React , {useState} from 'react'


function Content() {
    const [url, setState] = useState("")

     function shorten() {
        var api = new URL("https://api.shrtco.de/v2/shorten"),
            params = { url }
        Object.keys(params).forEach(key => api.searchParams.append(key, params[key]))
        fetch(api , {
            mode: 'no-cors',
            
        }).then(res => {
               
                console.log(res)
                return res.json()
            
        })
        .then(data => {
            
            console.log(data)
            return data
        })
        .catch(error => console.log(error))


       
        
    }
   
    


    return (
        


        <>
            <Section>
                <Started>More than just shorter links<Para>Build your brand's recogination and get detailed
                insights on how your links are performing</Para>
                <Button>Get Started</Button></Started>
                
                <Image src={image}></Image>
            </Section>
            <BackgroundColour>
            <FormSection>
                <InputSection>
                    <Input value={url} onChange = {(e) => setState(e.target.value)} type="url" placeholder= "Shorten a link here..."></Input>
                    <ButtonLink onClick = {shorten}>Shorten it!</ButtonLink>

                </InputSection>

            </FormSection>
            </BackgroundColour>

        </>
    )
}

export default Content

问题是我无法访问收到的响应中的内容。我可以在控制台（XHR 请求）和网络选项卡中看到它作为响应。但原始响应是 JSON。我尝试使用 res.body 和 res.result 访问它，但它们分别是 null 和 undefined。当我在 .json() 调用后尝试查看它时，它会在标题中显示错误。