Fetch not working in react, weird error in console

JavaScript
1

I was getting ready to try to build a generic movie app project but came across a problem at the start. I have not used fetch in React yet and I’ve come across a weird issue. I’ve never had any console messages like this before and don’t understand what’s going on.

“Access to fetch at ‘http://example.com/movies.json’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”

import React from 'react'
import './App.css';
import { useEffect, useState } from 'react';

// a4bffa42
// http://www.omdbapi.com/?i=tt3896198&apikey=a4bffa42

function App() {

  useEffect(() => {
    fetch('http://www.omdbapi.com/?i=tt3896198&apikey=a4bffa42')
      .then((response) => response.json())
      .then((data) => console.log(data));
  }, [])

  return (
    <div className="app">
      <h1>example</h1>
    </div>
  );
}

export default App;
2

This is not a React issue. This is a CORS issue. I would do some reading on that. Google “http cors”.

2 Likes
3

Thank you, managed to fix it with a simple chrome extension!

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.