reactjsparcel

I encountered this error: Unhandled Rejection-Failed to fetch

I am creating a netflix like app for portfolio purposes and I am facing this error:

Unhandled Rejection(TypeError): Failed to fetch.

in this part of my code there seems to be the problem:

const [movies, setMovies] = useState([]);

useEffect(() => {
    fetch("https://movies-couch-api-herra17.vercel.app/movies") 
    .then((response) => response.json())
    .then((data) => {
        console.log(data);

precisely at .then((response....

Could someone share a clue or maybe would know what else I would need to review. I have an API that is working. The client component is structured with React. I have the following dependencies: prop-types, react, react-dom, parcel/transformer-sass.

Additionally this is how my index.jsx looks like:

import { createRoot} from 'react-dom/client';
import { MainView } from './components/main-view/main-view';
// Import statement to indicating bundle is needed import "./index.scss";
// Main component (will eventually use all others)
const MoviescouchApplication = () => { return <MainView />; }; // Find the root of your app const container = document.querySelector("#root"); const root = createRoot(container);
// Tells React to render your app in the root DOM element 
root.render(<MoviescouchApplication/>);
Solution

  • It's due to the API at https://movies-couch-api-herra17.vercel.app/movies preventing cross-domain origins from accessing it. If you try fetching that API in your console, you should be able to see the same error.

    CORS error