‘Access-Control-Allow-Origin’ missing when uploading to YouTube API
Asked Answered
K

3

6

For several years we have successfully been uploading videos via the YouTube API using some custom JavaScript code. The code was based on some samples provided by Google (cors_upload.js). It's not something we use a lot, just every couple of weeks.

Things were working fine a couple weeks ago, but it has come to my attention that things recently stopped working. We login fine, we obtain the channel info fine. But when we start the upload (which happens via XHR POST), we are getting a CORS error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.googleapis.com/upload/youtube/v3/videos?part=snippet%2Cstatus&uploadType=resumable. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

But we haven't changed anything in our code or on our server and it appears as if we are doing all the things necessary as documented by Google to have their service respond with the required CORS headers.

According to the dev console, the XHR request actually generates 2 network requests. First I see an "OPTIONS":

Request URL:https://www.googleapis.com/upload/youtube/v3/videos?part=snippet%2Cstatus&uploadType=resumable
Request Method:OPTIONS
Remote Address:172.217.9.42:443

This actually DOES return the "access-control-allow-origin" header that I expect. However, this is immediately followed by the "POST" request:

Request URL:https://www.googleapis.com/upload/youtube/v3/videos?part=snippet%2Cstatus&uploadType=resumable
Request Method:POST
Remote Address:172.217.9.42:443

And according to the dev console, it does NOT have the "access-control-allow-origin" header set. So, I understand why my browser is rejecting things. It just seems like Google broke something.

I did successfully deploy a NodeJS "CORS Anywhere" server on a server we manage. So, I can use that to work around the issue. But that really isn't the correct solution to the problem. Since uploading videos programmatically isn't something we do a ton, this work around will probably be sufficient for us. I would love to understand what went wrong or how to fix. So, if someone is successfully uploading videos with the YouTube API and JavaScript, I would love to hear about it. Hopefully this will help educate others if/when they run into the issue.

Krilov answered 11/6, 2020 at 5:7 Comment(3)
@DaImTo "Access-Control-Allow-Origin" value is needed in the youtube side, not at owner sideRagan
If I understand the protocol correctly, the "Access-Control-Allow-Origin" response header must be generated on the youtube side and received by the browser to effectively say "the domain where your app originated is OK to talk to me". Like I said, that is exactly what I get with the OPTIONS request. And presumably a couple weeks ago that is what I got in my POST request. But now, the POST request has no such response header, triggering my browser to raise the CORS violation. Are you saying this isn't right?Krilov
After reviewing: #10637111 I believe my understanding is correct. The OPTIONS request is referred to as the "pre-flight" and I do get the ACAO in the response header of the "pref-flight". Since everything looks good "pre-flight", the browser makes the request and the server is SUPPOSED to respond with another ACAO header, but this is NOT happening. So, either this is a bug in the googleapis.com service or there is some account/auth related setting that is needed to make the server respond correctly.Krilov
V
1

The same problem just started to happen with my services.

It seems to be a bug on googleapis or maybe youtube.v3.apis had a policy change and started to block some clients.

Vaticination answered 11/6, 2020 at 14:44 Comment(1)
Hey, thanks so much for the confirmation that it isn't just me and my account. I wish I knew what to do or exactly who to tell. I posted the issue to: issuetracker.google.com/issues/158718687 But tons of issues there never seem to get addressed, so I'm not holding my breath.Krilov
S
0

Same here. I have no Solution, just a workaround and I hope they fix it soon. You can disable the CORS safetycheck in chrome. Run chrome.exe with --disable-web-security and set the user-data Directory temporary to another location, with the following parameter and the folder you want --user-data-dir=c:/anyfolderName/`

For security reasons you should disable-web-security only if you have to and switch back if youre done.

I dont know why this get a downvote, because it helped me to get around. Now google fixed the issue, no need to use this workaround longer. But maybe it helps when another CORS issue arise...

Severini answered 17/6, 2020 at 12:38 Comment(0)
K
0

Google has fixed the problem and our long-standing code is back to working again without any changes.

Here is the tracked issue: https://issuetracker.google.com/issues/158718687

Krilov answered 19/6, 2020 at 2:57 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.