I am working on a JS video editor which runs on the front end. As a result, I get a video stream which I want to consume uploading to the user's youtube channel as the video processses and I get the chunks in the stream. I went through the documentation https://developers.google.com/youtube/v3/guides/using_resumable_upload_protocol (which is a bit outtaded) and, after some research, found the following solution, which work flawlessly with postman:
1st step: Authorize the user and get an access token.
2nd step: make a POST request to the API with the acces token on the "Authorization" header and obtain the upload URl, which will be recieved in the response header "Location".
Below a print with postman request and response for ilustration. In the response header there is an entry with "Location" key and a URl as value.
3rd step: Make a PUT request to the URl obtained on step 2 with the video blob/stream in the request body.
Problem is, either in step 2 or 3, when I try to fecth https://www.googleapis.com/... I get blocked by CORS... Since the first request is a POST request, I worked around adding mode:"no-cors" to the fetch options. However the second request, in which the video is acctualy sent, is a PUT request and fetch doesn't allow option no-cors for it, which put me on a dead-end... In postman work as charm and the video is uploaded... I also confirmed I can fecth other resources from within the same script I am trying to fetch the youtube API, which demostrates the CORS issue is on the API side...
I did an extensive research and the best answer to this problem I found was this: Youtube API (v3) and CORS preflight, despite it is an old thread, the conclusion is that the API should support CORS.
The code I run on the script and that returns the fail to fetch error is below, already with the URl obtained from the 1st request:
let options = {method:'PUT',body:readbale,duplex:'half'}
fetch([url obtained from POST request],options);And the error I get shows up as following:
