Always getting this CORS error during API fetching

Question

I am trying to fetch data using Axios, (URL: http://3.134.99.170:4000/upcomingMovies )

I am always getting this error: (Access to XMLHttpRequest at 'http://3.134.99.170:4000/upcomingMovies' from origin 'http://localhost:9000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.)

I have tried using fetch and superagent also, but the same error again.

Also, this is my code:

axios({
      method: "GET",
      url: "http://3.134.99.170:4000/upcomingMovies",
      headers: {
        'Access-Control-Allow-Headers': 'Content-Type, Accept, Access-Control-Allow-Origin, Access-Control-Allow-Methods',
        'Access-Control-Allow-Origin' : '*',
        'Access-Control-Allow-Methods' : 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
        "Content-type": "application/json"
      }
    })
    .then((response) => {
      setUpcomingMovies(response)
    })
    .catch((error) => {
      console.log(error)
    })

Answer 1

if you need only run and test your code, you can use no-cors mode in browser ( as described here Disable same origin policy in Chrome ) or use some extension for browser, which switchs off cors-restricted mode (like this https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf ) to avoid the issue. But if you need avoid the issue in production, you need backend support, as senthil balaji mentioned before