I have a problem with fetching images from an api-CodePudding

I tried the same with other api urls and it worked. The image will display and I can work with it. But I often get erros like some "cors policy" and I do not know how to fix this.

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

CodePudding user response：

try to habilitate the cors (for more info about it take a look here mozzilla documentation)

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

CodePudding user response：

Add these to request's header

headers: { Content-Type: "application/json", Access-Control-Allow-Origin: "*" },