CODEWITHSUNDEEP
javascriptcorsfetchvimeo
Jeanmichel Cote
Jeanmichel Cote

Reputation: 531

CORS issue while trying to get data from a clip on Vimeo using the api/oEmbed

I am using fetch to get the data. Like so:

  getClipMetadata = (url) => {
    const endpoint = 'http://www.vimeo.com/api/oembed.json';

    fetch(`${endpoint}?url=${encodeURIComponent(url)}`, { 
      method: 'get',
      cache: 'no-cache', 
      mode: 'cors',
      headers: new Headers({
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json'
      })
    })
      .then((response) => { return response.json();})
      .then((res) => console.log("async response received", res))
      .catch((err) => console.log("ajax error -> ", err))    
  }

So the error I get is this:
Response for preflight is invalid (redirect)

I thought it looked quite simple from Vimeo's developer page.

What am I doing wrong?

Upvotes: 2

Views: 2659

Answers (1)

Jeanmichel Cote
Jeanmichel Cote

Reputation: 531

The endpoint is 'https://vimeo.com/api/oembed.json' rather than 'http://www.vimeo.com/api/oembed.json' and the headers I was sending were causing problems too.

So the final working code looks like this:

  getClipMetadata = (url) => {
    const endpoint = 'https://vimeo.com/api/oembed.json';

    fetch(`${endpoint}?url=${encodeURIComponent(url)}`, { 
      method: 'get',
      cache: 'no-cache', 
      mode: 'cors',

    })
      .then((response) => { return response.json();})
      .then((res) => console.log("async response received", res))
      .catch((err) => console.log("ajax error -> ", err))    
  }

Upvotes: 5

Related Questions