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>