Angular应用通过SignedUrl上传GCS遇CORS错误及空文件问题

看起来你在通过Signed URL上传GCS文件时遇到了两个典型问题：CORS错误和Postman上传空文件。我来帮你逐一排查修复：

一、CORS错误的根源与修复 #

你看到的No 'Access-Control-Allow-Origin' header is present错误，不是来自你的Cloud Functions——因为云函数的CORS头只对「获取Signed URL」的请求有效。当你用Signed URL直接上传文件时，请求是发送到GCS的服务器，所以需要给GCS存储桶本身配置CORS规则。

具体操作步骤： #

1. 新建一个cors.json文件，填入以下配置（生产环境建议把"*"替换成你的Angular应用域名，比如https://your-angular-app.com）：

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

2. 使用gsutil工具将配置应用到你的存储桶：

gsutil cors set cors.json gs://nx-terega-omega

提示：如果本地没装gsutil，可以直接用Google Cloud Console里的Cloud Shell执行这条命令。

二、Postman上传空文件的问题修复 #

看你的代码发现一个明显的疏漏：调用generateV4UploadSignedUrl函数时，没有传递filetype参数！这会导致函数里的contentType选项是undefined，GCS收到上传请求时，因为Content-Type不匹配，就会存一个空文件。

修复代码： #

修改云函数中调用generateV4UploadSignedUrl的代码，把filetype传进去：

generateV4UploadSignedUrl(bucketName, filename, filetype).then(function (value) {
  console.log('File Url response ', value);
  res.status(200).send(JSON.stringify({'url': value}));
}).catch(error => {
  res.status(404).send('Error while generating signed url');
});

另外，在Postman上传时，一定要确保设置的Content-Type和你请求Signed URL时传入的fileType完全一致（比如image/png、text/csv等），不要随便用application/octet-stream，除非你确实在传无类型的二进制流。

三、额外的检查建议 #

• 确认Signed URL的过期时间（你设置的15分钟是合理的），避免上传过程中URL过期失效。
• 检查Cloud Functions使用的服务账号是否拥有storage.objects.create权限，这是生成有效Signed URL的必要条件。
• 在Angular应用中上传时，记得用PUT方法发起请求，并且设置正确的Content-Type请求头，和生成Signed URL时的filetype保持一致。

内容的提问来源于stack exchange，提问作者Ghizlane Lotfi