从 Nuxt 上传到 AWS S3 存储桶时出现 500 Internal Server Error

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 配置

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

Answer 1

需要在后端修复错误，因为它是 CORS。它清楚地表明缺少 header of Access-Control-Allow-Origin.
因此，在官方 AWS 文档中查看它可以得到答案：https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

Answer 2

我遇到了同样的问题，但根据文档，您应该使用 Cognito Identity 来访问存储桶。只有在 V3 中，客户端才能从浏览器访问存储桶，您必须使用 Cognito Identity 对用户进行身份验证才能访问 bucket/object 命令。目前正在尝试实施，所以我不是 100% 如何做到这一点的过程。随意看看。我希望这有帮助。 ~~~~~~~~~~~~~~~~~~~~~~~~~~ | Cognito SDK Link：| https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html |示例：| https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/loading-browser-credentials-cognito.html

Answer 3

我今天遇到了同样的问题。 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

Answer 4

在存储桶策略中使用这个

 {
"Version": "2008-10-17",
"Statement": [
    {
        "Effect": "Allow",
        "Principal": {
            "AWS": "*"
        },
        "Action": [
            "s3:GetObjectAcl",
            "s3:GetObject",
            "s3:PutObject",
            "s3:PutObjectAcl",
            "s3:ListMultipartUploadParts"
        ],
        "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*",
        "Condition": {
            "StringLike": {
                "aws:Referer": "https://example/*"
            }
        }
    }
]}

并使用存储桶的区域

const s3 = new aws.S3({
    apiVersion: 'latest',
    accessKeyId: process.env.AWS_ACCESS_KEY_ID_CUSTOM,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY_CUSTOM,
    region: 'us-west-1',
})

Answer 5

我在这里做错了很多事。关于这个 post 的每一个答案都帮助我在调试时取得了一点进展。感激不尽！

我的存储桶策略没有使用基于角色的 ALLOW/DENY，它必须与我的 Cognito 身份池中经过身份验证的角色相对应。
需要将身份验证提供程序正确配置为 Cognito 用户池。
确保区域正确。 Cognito 区域可能与 S3 区域不同。
确保 CORS 策略包含相关信息，例如“Access-Control-Allow-Origin”。
仔细检查令牌是否包含正确的凭据。这非常方便 cognito decode-verify
是从浏览器进行的独立测试。但这不是一个好方法。使用 API 服务器获取文件并从那里推送到 S3。

从 Nuxt 上传到 AWS S3 存储桶时出现 500 Internal Server Error

500 Internal Server Error when uploading to an AWS S3 bucket from Nuxt

amazon-s3

http-status-code-500

vue.js

amazon-cognito

nuxt.js