我在从 api 获取图像时遇到问题答案

【问题标题】：I have a problem with fetching images from an api我在从 api 获取图像时遇到问题
【发布时间】：2022-12-05 20:28:19
【问题描述】：

我对其他 api url 进行了相同的尝试，并且成功了。图像将显示，我可以使用它。但我经常遇到一些“cors 政策”之类的错误，我不知道如何解决这个问题。

function Celeb() {
  const [image, setImage] = useState([]);

  const handleNext = () => {
    fetch('https://coffee.alexflipnote.dev/random')
    .then(res => res.json())
    .then(data => 
      setImage(data))
      const unblurit = document.querySelector(".pic img");
      unblurit.classList.remove("unblur");
      unblurit.classList.add("blur");
    }


 return (
    <div className='celeb'>
      <div className='celeb_buttons'>
        <button className='play_button' onClick={handleNext}>Next</button>
        <button className='play_button' onClick={handleStart}>Start</button>
      </div>
      <div className='pic'>
        <img src={image}></img>
      </div>
    </div>
  )

【问题讨论】：

标签： reactjs api

【解决方案1】：

尝试让 cors 康复（有关它的更多信息，请看这里mozzilla documentation）

fetch("https://coffee.alexflipnote.dev/random", { mode: "cors" })

【讨论】：

仍然出现此错误：CORS 策略已阻止从源“localhost:3000”获取“coffee.alexflipnote.dev/random”的访问权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

【解决方案2】：

将这些添加到请求的标头

标题：{ 内容类型：“应用程序/json”，访问控制允许来源：“*” },

【讨论】：