如何在js中检查一个url是否是带有fetch的图像？

如何解决如何在js中检查一个url是否是带有fetch的图像？

我在检查 url 是否为图像的代码方面遇到问题。

实际上，我有这个代码：

var result = document.getElementById("result")
document.getElementById("someForm").addEventListener("submit",(event)=>{
  event.preventDefault()
  result.textContent = "Image Test"
  var img = document.createElement("img")
  img.setAttribute("src",imageUrl.value)
  img.addEventListener("load",(event)=>{
    result.textContent = "Image ok"
    setTimeout(()=>{
      result.textContent = "Waiting for imageUrl..."
    },2000)
  })
  img.addEventListener("error",(event)=>{
    result.textContent = "Link is not an image"
    setTimeout(()=>{
      result.textContent = "Waiting for imageUrl..."
    },2000)
  })
})

input[type="url"] {
  width:100%;
}

<form id="someForm">
  <label for="imageUrl">Enter image url here:</label>
  <br/>
  <input type="url" id="imageUrl">
  <br/>
  <input type="submit">
</form>
<p id="result">Waiting for imageUrl...</p>

但是当我尝试使用 fetch 或 XMLhttprequest 时，我得到了一个错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource

你知道用 fetch 来做这件事吗？ 谢谢