从 Nuxt 上传到 AWS S3 存储桶时出现 500 内部服务器错误

Question

我正在尝试使用aws-sdk v3从 Nuxt 应用程序的 Vue 组件将文件上传到 AWS S3 。

这是我上传的方法。

<script>
export default {
...
methods: {
onSubmit(event) {
    event.preventDefault()
    this.addPhoto()
},
addPhoto() {
  // Load the required clients and packages
  const { CognitoIdentityClient } = require('@aws-sdk/client-cognito-identity')
  const { fromCognitoIdentityPool } = require('@aws-sdk/credential-provider-cognito-identity')
  const {
    S3Client,
    PutObjectCommand,
    ListObjectsCommand,
    DeleteObjectCommand,
  } = require('@aws-sdk/client-s3')

  const REGION = 'us-east-1' // REGION
  const albumBucketName = 'samyojya-1'
  const IdentityPoolId = 'XXXXXXX'

  const s3 = new S3Client({
    region: REGION,
    credentials: {
      accessKeyId: this.$config.CLIENT_ID,
      secretAccessKey: this.$config.CLIENT_SECRET,
      sessionToken: localStorage.getItem('accessToken'),
    },
  })

  var file = this.formFields[0].fieldName
  var fileName = this.formFields[0].fieldName.name
  var photoKey = 'user-dp/' + fileName
  var s3Response = s3.send(
    new PutObjectCommand({
      Bucket: albumBucketName,
      Key: photoKey,
      Body: file,
    }),
  )
  s3Response
    .then((response) => {
      console.log('Successfully uploaded photo.' + JSON.stringify(response))
    })
    .catch((error) => {
      console.log(
        'There was an error uploading your photo: Error stacktrace' + JSON.stringify(error.message),
      )
      const { requestId, cfId, extendedRequestId } = error.$metadata
      console.log({ requestId, cfId, extendedRequestId })
    })
},

...

}
</script>

现在的问题是浏览器抱怨 CORS。

这是我在 AWS S3 上的 CORS 配置

1. 我在使用 SDK 创建上传请求时怀疑有什么问题。（我愿意使用比我正在使用的更好的 API）。
2. 允许 CORS 的 Nuxt 设置。
3. S3 CORS 配置上的其他权限
4. Chrome 开发工具上的网络选项卡显示预取的内部服务器错误 (500)。（不知道为什么我们在这里看到 2 个条目） 感谢有关如何调试此问题的任何指示。

Answer 1

我今天也遇到了同样的问题。S3 日志显示它返回了 200 代码响应，但 Chrome 看到的是 500 响应。在 Safari 中，错误显示为：

received 'us-west-1'; expected 'eu-west-1'

在创建 S3 服务时添加region: 'eu-west-1'（即创建 Bucked 的区域）到参数中解决了我的问题。

https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/setting-region.html#setting-region-constructor