Returned 'Access-Control-Allow-Origin' is not taken into account for youtube v3 CORS

问题

I have a client and a server. My work flow is as follows:

The server uploads a snippet to youtube with API v3 and gets a resumable url (Youtube v3 API for resumable uploads - https://developers.google.com/youtube/v3/guides/using_resumable_upload_protocol)
This url is send from my server to the browser where the browser makes an ajax PUT request to upload the actual file to the resumable url.
In this way the file is not transferred to the server, but directly uploaded from the client.

As a result I get an error and the file can not be uploaded.

XMLHttpRequest cannot load https://www.googleapis.com/upload/youtube/v3/videos?key=mydevkeyanduploadid. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

This is the ajax request:

var ajax = $.ajax({
    url: options.url,
    method: 'PUT',
    crossDomain:true,
    contentType: options.file.type,
    headers: {
        'Authorization': 'Bearer ' + options.accessToken,
        'Content-Range': 'bytes ' + options.start + '-' + (options.file.size - 1) + '/' + options.file.size
    },
    processData: false,
    data: options.file
});

The browser sends an OPTIONS request which looks like this:

Remote Address:173.194.65.95:443
Request URL:https://www.googleapis.com/upload/youtube/v3/videos?key=mydevkey&part=snippet%2Cstatus&uploadType=resumable&upload_id=myuploadid
Request Method:OPTIONS
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,es;q=0.6,pt;q=0.4,bg;q=0.2
Access-Control-Request-Headers:content-range, accept, authorization, content-type
Access-Control-Request-Method:PUT
Connection:keep-alive
Host:www.googleapis.com
Origin:http://localhost:3000
Referer:http://localhost:3000/episodes/0-do-you-know-your-enemy/preview
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Query String Parametersview sourceview URL encoded
key:mydevkey
part:snippet,status
uploadType:resumable
upload_id: myuploadit-this one is long
Response Headersview source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:content-range, accept, authorization, content-type
Access-Control-Allow-Methods:PUT
Access-Control-Allow-Origin:http://localhost:3000
Alternate-Protocol:443:quic,p=0.02
Content-Length:0
Content-Type:text/html; charset=UTF-8
Date:Sun, 11 Jan 2015 13:56:11 GMT
Server:UploadServer ("Built on Dec 19 2014 10:24:45 (1419013485)")

From this response I see that

Access-Control-Allow-Headers:content-range, accept, authorization, content-type
Access-Control-Allow-Methods:PUT
Access-Control-Allow-Origin:http://localhost:3000

and I understand that I am allowed to send a PUT request to the url if this request comes from

http://localhost:3000

After the OPTIONS request the PUT request is made:

Request URL:https://www.googleapis.com/upload/youtube/v3/videos?key=mydevkey&part=snippet%2Cstatus&uploadType=resumable&upload_id=myuploadid
Request Headers CAUTION: Provisional headers are shown.
Accept:*/*
Authorization:Bearer thishereistheaccesstoken
Content-Range:bytes 0-21234/21235
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Origin:http://localhost:3000
Referer:http://localhost:3000/episodes/0-do-you-know-your-enemy/preview
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Query String Parametersview sourceview URL encoded
key:mydevkey
part:snippet,status
uploadType:resumable
upload_id:myuploadid

As we can see the

Origin:http://localhost:30000

is presented since this is the origin from which the PUT request is made.

But as a result I do have

XMLHttpRequest cannot load https://www.googleapis.com/upload/youtube/v3/videos?key=mydevkeyanduploadid. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

Why do I get an "No 'Access-Control-Allow-Origin' header is present on the requested resource." given that the 'Access-Control-Allow-Origin' is actually returned from the OPTIONS request to the server?

来源：https://stackoverflow.com/questions/27888158/returned-access-control-allow-origin-is-not-taken-into-account-for-youtube-v3

标签

ajax

youtube-api

cors

same-origin-policy

youtube-data-api