fetch error: Error: response code 0

[tiger-githubb]

Hello, I have issue when i'm trying to fetch metadata of external data

I got this error.

Here is my code.

"use client";
import React, { useState, useEffect } from "react";

function ToolsPage() {
  const [metadataImage, setMetadataImage] = useState<string | undefined>(
    undefined
  );

  const urlMetadata = require("url-metadata");

  useEffect(() => {
    const fetchData = async () => {
      try {
        const options = {
          mode: "no-cors",
          includeResponseBody: false,
        };

        const metadata = await urlMetadata(
          "https://youtube.com/",
          options
        );

        const ogImage = metadata["og:image"] || undefined;
        setMetadataImage(ogImage);

        console.log("fetched metadata:", metadata);
        console.log("inside fetchMetadata, ogImage:", ogImage);
      } catch (err) {
        console.log("fetch error:", err);
      }
    };

    fetchData();
  }, []); 

  console.log("outside fetchMetadata, metadataImage:", metadataImage);

  return (
    <>
      <img
        src={`${metadataImage}`}
        className="object-cover h-52 w-96 object-center pb-3 rounded-t-lg"
        alt=""
      />
    </>
  );
}

export default ToolsPage;

[laurengarcia]

Response status code 0 is coming directly from javascript native fetch api inside the package. The request failed at either the network or protocol level.

Here are some possible causes of a status code 0:

• CORS errors. Try changing the mode option ((ex: cors, no-cors, same-origin, etc)
• A browser plugin such as an ad blocker or privacy protector, blocking the request. It could also be caused by trying to access an https resource that has an invalid certificate, or trying to access an http resource from a page with an https origin.