405 Method Not Allowed with AWS S3 using "createPresignedPost"

[IHIutch]

Im using Nuxt proxy module to post to an S3 bucket. In a normal Vue environment, I am able to get the presignedpost data and upload a file to my bucket. But with Nuxt when I post to my bucket URL via a proxy, I get a 405 response. I'm wondering if there is some Header data that is being modified or if something else is going on behind the scenes that changes the request so that S3 won't allow it.

Any tips on debugging would be helpful, Im pretty much an amateur when it comes to proxying.

My config:

axios: {
proxy: true,
},
proxy: {
"/aws": "https://s3.us-east-2.amazonaws.com/mybucketname",
},

Currently using:

"@nuxtjs/axios": "^5.11.0",
"@nuxtjs/proxy": "^2.0.1",
"aws-sdk": "^2.725.0",
"nuxt": "^2.14.0",

[JoaquimLey]

Can you check if your request is not pretending your proxy path to the signed URL?

Let's say you make a request for a signed POST Url you get back: https://s3.somethingsomething.anotherthing.com/randomchars

But then you prepend your s3 /aws path resulting in making the POST request to the whole

https://s3.us-east-2.amazonaws.com/mybucketnamehttps://s3.somethingsomething.anotherthing.com/randomchars

[IHIutch]

The url I get back is just the path to my bucket, so there are no /randomchars to append.

My post to aws looks like

doPost(){
     ...create formData...
     ...append formData...

     this.$axios.$post("/aws", {
          formData
     });
}

So in theory, I'll be posting to https://s3.us-east-2.amazonaws.com/mybucketname using the proxy, if I'm understanding it all correctly

[JoaquimLey]

Yes, what I meant is since you are using the $axios plugin make sure you are not pretending yourbaseURL if you have one configured on the plugin level.

Just to double-check can you see your dev tools network tab or console.log the whole path?

[IHIutch]

This is from a console.log I added as a custom plugin to capture the request config. It seems to be the POST to the server though, rather than the request from the server. I'm not sure how to see that.

[IHIutch]

Okay, I figured it out. After doing the console.log inside onProxyReq like so:

proxy: {
    "/aws": {
      target: "https://s3.us-east-2.amazonaws.com/mybucketname",
      onProxyReq(proxyReq, req, res) {
        console.log(proxyReq.path);
      }
    }
  },

I was able to see the path I was actually POSTing to from the server was https://s3.us-east-2.amazonaws.com/mybucketname/aws

So I added a pathRewrite:

proxy: {
    "/aws": {
      target: "https://s3.us-east-2.amazonaws.com/mybucketname",
      pathRewrite: { "^/aws": "" }, // Very important!
    }
  },

Now my POST is to https://s3.us-east-2.amazonaws.com/mybucketname as expected and I can upload files!

Thanks for your time and help @JoaquimLey

// Rant I'll be honest, I don't know a lot about proxying and or even Nuxt for that matter, but I've been able to read about it and tinker through enough to build something I think is kinda cool. That being said, this module is INCREDIBLY confusing and I've by spent by far the most amount of my time so far reading and failing and spinning my tires trying to get it to work. I think if someone smarter than I could show a few realistic examples of how to get this work I (and I'm sure many others) would be very, very grateful.

[JoaquimLey]

@IHIutch you are more than welcome, I'm just happy I was able to at least help you out a little bit in solving this problem.

I agree with you Nuxt sometimes can be a bit confusing I am too struggling with some tasks that should be simple, but that's normal when you are working with a new framework.

I don't have any experience using the proxy as you are here, for me, I just import the axios instance directly when I don't want to use any of my plugin ($axios) configs such as baseURL.