How to fix InvalidArgument error 400 when trying to upload a file into a S3 bucket?

Viewed 391

I'm trying to upload a file into a S3 bucket with a pre-signed URL using Axios. It seems to work as I see the PUT request in the network inspector, but the response I receive is an error 400 InvalidArgument. Here is more about the error I get:

<Error>
    <Code>InvalidArgument</Code>
    <Message>Only one auth mechanism allowed; only the X-Amz-Algorithm query parameter, Signature query string parameter or the Authorization header should be specified</Message>
    <ArgumentName>Authorization</ArgumentName>
    <ArgumentValue>Bearer xxxxxxxxxxxxxxx</ArgumentValue>
    <RequestId>xxxxxxxxxxxxxxx</RequestId>
    <HostId>xxxxxxxxxxxxxxx</HostId>
</Error>

Here is my bucket CORS policy:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

And here's my Nuxt.js page that made the request for the pre-signed URL and than upload the file:

<template>
  <v-file-input label="Select your file to upload" accept="image/*" v-model="myFile">
    File to upload to S3
  </v-file-input>
</template>

<script>
export default {
  data() {
    return {
      myFile: null,
      ApiGatewayUrl: "https://xxxxxx.execute-api.eu-central-1.amazonaws.com/"
    }
  },
  methods: {
    uploadFile() {
      let formData = new FormData()
      formData.append("files", this.myFile, "testname");

      // get the pre-signed URL
      this.$axios.get(this.ApiGatewayUrl, {
        headers: {
          Authorization: this.$auth.strategy.token.get()
        }
      }).then((response) => {
      
        // now do a PUT request to the pre-signed URL
        this.$axios.put(response.data, formData).then((response) => {
          this.setState({
            statusCode: response.status,
          })
        })
      })
    }
  }
}
</script>
0 Answers
Related