[SOLVED] Flask 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

Flask 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

I am trying to configure the flask backend to react front end. Both of these are running in different ports so I am importing CORS to allow config the backend to work with an application that's located on a different port (backend is running on 5000 frontend is running on 3000).

Here's my setup that works:

main.py

app=Flask(__name__)
...
CORS(app)

App.js

  useEffect(
    ()=>{
      fetch('http://127.0.0.1:5000/recipe/hello')
      .then((response=>{console.log(response); return response.json()}))
      .then(data=>console.log(data))
      .catch(err=>console.log(err))
    },[]
  )

Package.json

"proxy": "http://localhost:5000",

It's weird how the front end has to have proxy set in package.json and then the fetch command has to have the full proxy path with http://127.0.0.1:5000 (it doesn't work with http://localhost:5000)

Can someone please explain me what's going on here? Why does it have to be configured in this weird way to work and how I can fix it?

For more context: I am following this tutorial https://www.youtube.com/watch?v=Zr5jtRhUVJA.

Solution

It was because mac had port 5000 reserved so localhost:5000 access is blocked. Fix is to specify another port to run the backend.