Getting this error message 'TypeError: Failed to fetch'

Question

While trying to fetch images from cloudinary getting this error 'TypeError: Failed to fetch'. Its a MERN project.

const fetchPosts = async () => {
  setLoading(true);

  try {
    const response = await fetch("http://localhost:8080/api/v1/post", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });

    if (response.ok) {
      const result = await response.json();
      setAllPosts(result.data.reverse());
    }
  } catch (err) {
    alert(err);
  } finally {
    setLoading(false);
  }
};

Answer 1

Failed to fetch issue is the most probably because of CORS , please make sure that your backend should allow requests from your domain. Also please check the response that has been sending from backend api.

Answer 2

This is likely an issue with what you're receiving from the backend. Check CORS headers, the HTTP method the backend expects, the URL, etc.

See this link for some more possible answers:
https://bobbyhadz.com/blog/javascript-typeerror-failed-to-fetch-cors