Node生成S3预签名URL后Angular4上传视频遇签名不匹配错误

兄弟，我来帮你排查下这个S3预签名URL上传的坑！我之前也踩过类似的雷，咱们一步步来捋：

这是最常见的错误点！你Node端生成预签名URL时，是按PUT还是POST请求生成的？S3的预签名URL是和请求方法绑定死的——如果Node端用的是getSignedUrl('putObject', ...)生成的URL，前端必须用PUT请求上传，用POST肯定会报错。

你可以去Node代码里核对下生成逻辑，要是确实是PUT类型的预签名，那前端直接把请求方法改成PUT就行。

你生成的URL里已经明确指定了Content-Type=video%2Fmp4，那前端上传时的请求头Content-Type必须完全匹配，不能是multipart/form-data或者其他类型。用Angular的HttpClient的话，可以这么设置：

const uploadHeaders = new HttpHeaders({
  'Content-Type': 'video/mp4'
});
this.http.put(yourPreSignedUrl, videoFile, { headers: uploadHeaders }).subscribe(
  res => console.log('上传成功'),
  err => console.error('上传出错', err)
);

另外也可以直接用文件本身的type属性，确保和预签名里的一致：'Content-Type': videoFile.type。

这也是高频踩坑点！你的S3桶必须允许对应的请求方法、前端域名，还要暴露必要的响应头。比如CORS配置可以改成这样：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>你的前端域名，比如http://localhost:4200</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod> <!-- 对应你用的请求方法 -->
    <AllowedMethod>POST</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
</CORSRule>
</CORSConfiguration>

注意修改后要保存配置，有时候S3的CORS生效会有几分钟延迟。

Angular有时候会自动添加一些额外请求头（比如X-Requested-With），这可能会触发S3的跨域拦截。如果前面的方法都没用，可以试试在请求里移除不必要的头，或者在CORS配置里明确允许这些头。

要是还是有问题，你可以把前端报错的具体信息贴出来，咱们再精准定位！

内容的提问来源于stack exchange，提问作者Adam Titus