title: 500 Internal Server Error when uploading to an AWS S3 bucket from Nuxt
body: <p>I am trying to upload a file to AWS S3 using <a href="https://github.com/aws/aws-sdk-js-v3#getting-started" rel="nofollow noreferrer">aws-sdk v3</a> from a Nuxt app's Vue Component.</p>
  <p>Here's how I upload it.</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
  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) =&gt; {
        console.log('Successfully uploaded photo.' + JSON.stringify(response))
      })
      .catch((error) =&gt; {
        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 })
      })
  },
  
  ...
  
  }
  &lt;/script&gt;
  </code></pre>
  <p>The issue now is that the browser complains about CORS.</p>
  <p><a href="https://i.stack.imgur.com/8IV3N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8IV3N.png" alt="CORS error while s3 upload" /></a></p>
  <p>This is my CORS configuration on AWS S3</p>
  <p><a href="https://i.stack.imgur.com/GCKq6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GCKq6.png" alt="s3 CORS Configuration" /></a></p>
  <ol>
  <li>I'm suspecting something while creating the upload request using SDK. (I'm open to use an API that is better than what I'm using).</li>
  <li>Nuxt setting that allows CORS.</li>
  <li>Something else on S3 CORS config at permissions</li>
  <li>Network tab on chrome dev tools shows Internal Server Error (500) for prefetch. (Don't know why we see 2 entries here)
  <a href="https://i.stack.imgur.com/WPUtx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WPUtx.png" alt="Network tab snapshot 1 without OPTIONS HTTP verb. This is called first" /></a>
  <a href="https://i.stack.imgur.com/UIJaY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UIJaY.png" alt="Network tab snapshot 2 with OPTIONS HTTP verb" /></a>
  Appreciate any pointers on how to debug this.</li>
  </ol>