Django、Heroku、boto：直接文件上传到谷歌云存储

Question

在部署在 Heroku 上的 Django 项目中，我曾经通过 boto 将文件上传到 Google 云存储。但是，最近我必须上传大文件，这会导致 Heroku 超时。

我正在关注 Heroku 关于direct file upload to S3 的文档，并进行如下自定义：

Python：

conn = boto.connect_gs(gs_access_key_id=GS_ACCESS_KEY,
                       gs_secret_access_key=GS_SECRET_KEY)
presignedUrl = conn.generate_url(expires_in=3600, method='PUT', bucket=<bucketName>, key=<fileName>, force_http=True)

JS：

url = 'https://<bucketName>.storage.googleapis.com/<fileName>?Signature=...&Expires=1471451569&GoogleAccessId=...'; // "presignUrl"

postData = new FormData();
postData.append(...);
...

$.ajax({
  url: url,
  type: 'PUT',
  data: postData,
  processData: false,
  contentType: false,
});

我收到以下错误消息：

XMLHttpRequest cannot load http:/...  Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

编辑：

gsutil cors get gs://<bucketName>的输出：

[{"maxAgeSeconds": 3600, "method": ["GET", "POST", "HEAD", "DELETE", "PUT"], "origin": ["*"], "responseHeader": ["Content-Type"]}]

似乎 CORS 没问题。那么，我该如何解决这个问题呢？谢谢。

编辑 2：

来自 Firefox 的 OPTION 请求的标头：

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: zh-TW,zh;q=0.8,en-US;q=0.5,en;q=0.3
Access-Control-Request-Method: PUT
Connection: keep-alive
Host: <bucketName>.storage.googleapis.com
Origin: http://localhost:8000
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:48.0) Gecko/20100101 Firefox/48.0

来自 Chrome 的 OPTION 请求的标头：

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-TW,zh;q=0.8,en;q=0.6,en-US;q=0.4,zh-CN;q=0.2
Access-Control-Request-Headers:
Access-Control-Request-Method:PUT
Connection:keep-alive
Host:directupload.storage.googleapis.com
Origin:http://localhost:8000
Referer:http://localhost:8000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
X-Client-Data:CIe2yQEIprbJAQjznMoB

Answer 1

标头问题不是来自您的应用程序，我认为它来自云存储桶。我在设置 api 时遇到了同样的问题，您发布到的资源缺少标题。

https://cloud.google.com/storage/docs/cross-origin

虽然有助于防止恶意行为，但此安全措施还可以防止已知来源之间有用且合法的交互。例如，在 example.appspot.com 上由 Google App Engine 托管的页面上的脚本可能希望使用存储在 example.storage.googleapis.com 上的 Cloud Storage 存储桶中的静态资源。但是，因为从浏览器的角度来看，这是两个不同的来源，所以浏览器不允许来自 example.appspot.com 的脚本使用 XMLHttpRequest 从 example.storage.googleapis.com 获取资源，因为获取的资源来自不同的来源。

所以看起来您需要配置存储桶以允许 cors 请求。 google 文档显示了要从 google cli 运行的以下代码。

https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket

gsutil cors set cors-json-file.json gs://example

[
    {
      "origin": ["http://mysite.heroku.com"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE", "PUT"],
      "maxAgeSeconds": 3600
    }
]

这将允许您获取、上传和删除内容。希望对您有所帮助。

Answer 2

根据 EDIT 2 中的信息，请求有问题。预检 (OPTIONS) 请求包含标头 ACCESS-CONTROL-REQUEST-HEADER。这不是有效的 CORS 标头。正确的标题是ACCESS-CONTROL-REQUEST-HEADERS，注意末尾的“S”。

即使标头是正确的，它也不应该为access-control-allow-origin 标头请求授权。 ACCESS-CONTROL-ALLOW-ORIGIN 不是从客户端发送的标头。它是一个标头，当服务器收到预检请求时，将在从服务器到客户端的响应中自动发送。客户端/浏览器将不允许跨域 PUT 请求，除非它在预检请求中从跨域服务器获得授权浏览器文档当前来源的 ACCESS-CONTROL-ALLOW-ORIGIN 标头。

错误标头的存在似乎与您收到的错误响应密切相关。但是，看起来该标头可能不在您的原始代码中，看起来您稍后添加了它（基于您的 cmets）。一定要把那个头配置去掉，肯定是不正确的。

所以我对那个标头的来源有点困惑，但我认为这是你问题的根源。

看起来您正在使用 jQuery 来发出 AJAX PUT 请求。我真正能建议的是确保您没有在 JS 代码中的某个地方调用 $.ajaxSetup() 可能配置了错误的标头。

Answer 3

经过这么多的尝试和错误，我想出了以下内容。程序正常工作，但是，有时/某些上传的图像不可见；其他时候他们还可以。我不知道为什么会这样。

我想请教更多关于为什么文件上传正常但某些图像已损坏的想法。

gsutil 命令：

gsutil cors set cors.json gs://<bucketName>
gsutil defacl ch -u allUsers:R gs://<bucketName>

cors.json 文件的内容：

[
    {
        "origin": ["*"],
        "responseHeader": ["Content-Type"],
        "method": ["GET", "POST", "HEAD", "DELETE", "PUT"],
        "maxAgeSeconds": 3600
    }
]

HTML：

<p id=status>Choose your avatar:</p>
<input id=fileInput type=file>

JavaScript：

$(document).on('change', '#fileInput', function() {
  var $this = $(this);
  var file = $this[0].files[0];

  $.ajax({
    url: 'upload/sign/?fileName=' + file.name + '&contentType=' + file.type,
    type: 'GET'
  })
  .done(function(data) {
    var response = JSON.parse(data);
    uploadFile(file, response.presignedUrl, response.url, response.contentType)
  })
  .fail(function() {
    alert('Unable to obtain a signed URL.');
  });
});

function uploadFile(file, presignedUrl, url, contentType) {
  var postData = new FormData();
  postData.append('file', file);

  $.ajax({
    url: presignedUrl,
    type: 'PUT',
    data: postData,
    headers: {
      'Content-Type': contentType,
    },
    processData: false,
    contentType: false
  })
  .done(function() {
    alert('File upload successful');
  })
  .fail(function() {
    alert('Unable to upload the file.');
  });
}

姜戈：

项目的urls.py：

urlpatterns = [
    ...
    url(r'upload/', include('upload.urls', namespace='upload')),
]

应用的urls.py:

urlpatterns = [
    url(r'^$', views.upload, name='upload'),
    url(r'^sign/', views.sign, name='sign'),
]

views.py：

def upload(request):
    # ... render the template


def sign(request):
    fileName = request.GET.get('fileName')
    contentType = request.GET.get('contentType') 
    conn = boto.connect_gs(gs_access_key_id=GS_ACCESS_KEY,
                           gs_secret_access_key=GS_SECRET_KEY)
    presignedUrl = conn.generate_url(3600, 'PUT', GS_BUCKET_NAME, fileName, headers={'Content-Type':contentType})
    return HttpResponse(
        json.dumps({
            'presignedUrl': presignedUrl,
            'url': GS_URL + fileName,
            'contentType': contentType
        })
    )