0

I want to fetch some data from an API. But CORS policy is blocking the access for fetching

  const fetchApi = async () => {
    const result = await fetch('https://api.themoviedb.org/3/discover/movie?',
    {
      method: "GET",
      headers: {
        "Access-Control-Allow-Headers": "Content-Type, Authorization",
        "Access-Control-Allow-Origin": "http://localhost:3000",
        "Access-Control-Allow-Methods": "POST,GET,OPTIONS",
        'Access-Control-Allow-Credentials': true,
        accept: 'application/json',
        Authorization: 'Bearer API_KEY',
        'callback' : 'test'
      }
    })
  }
  useEffect(() => { fetchApi() }, [])

Error screenshot

As of my limited knowledge, header data is not getting passed.

I tried two things :

  1. Instead of passing API key through header, I added api key with url. It gave result. But my requirement is to pass API key via header.

2.Tried adding access-controls in header. Still the error remains the same

Even after specifying the headers, CORS is blocking the request. I think the header data is not passing to the gateway. Someone please healp me with this. I can't figure out know what went wrong

Unnikrishnan KJ
  • 53
  • 7
  • 2
    `Access-Control-Allow-*` headers are RESPONSE headers, they do not belong in a REQUEST. You can't "fool" CORS, the server needs to ALLOW CORS, that one does not. Proxy the request using YOUR server – Jaromanda X May 15 '23 at 02:14

0 Answers0