Search code examples
javascriptyoutubecorsoembedfetch-api

CORS error with window.fetch on YouTube resource


I'm using window.fetch to retrieve a YouTube resource with the following URL:

http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=[id]&format=json

Using Fiddler, I see that I am getting the expected reply from YouTube's servers containing JSON data. However, I'm not able to use it as I'm getting a Javascript error.

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:60366' is therefore not allowed access.

I tried enabling CORS on my window.fetch but I read that this will only work if the server allows CORS in its header response. YouTube doesn't have this header field in its reply.

How do I enable my script to accept a response from YouTube using window.fetch? (I'm using Chrome v44.)

window.fetch(
            url, {
                method: 'GET',
                mode: 'cors',
                headers: {
                    'Accept': 'text/plain',
                    'Content-Type': 'text/plain'
                }
            })
...

Solution

  • I think you need to use youtube API to be able to make CORS request.

    https://developers.google.com/youtube/v3/