I encountered this error: Unhandled Rejection-Failed to fetch

Question

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

Does this answer your question? [XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header) — Phil, May 31 '23 at 00:08

score -3 · Accepted Answer · answered Feb 15 '23 at 15:50

-3

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.

answered Feb 15 '23 at 15:50

khangnd

323
3
11

I encountered this error: Unhandled Rejection-Failed to fetch

1 Answers1