Quantcast
Channel: Active questions tagged aws-lambda - Stack Overflow
Viewing all articles
Browse latest Browse all 4019

AWS API Gateway and CORS issues

$
0
0

I have an AWS API Gateway URL (https://mhw8mm294k.execute-api.us-east-1.amazonaws.com/prod/saveImage) that has a GET, POST, and OPTIONS method. CORS is enabled on the resource. When I use a browser (GET) or Postman (POST) it works.. In the VUE code I am using AXIOS to do a post. This always fails with a CORS error:

Access to XMLHttpRequest at 'https://mhw8mm294k.execute-api.us-east-1.amazonaws.com/prod/saveImage' from origin 'https://mikesmilkbottles.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


The CORS settings on the API Gateway are as follows: enter image description here


The VUE code that does the post sends a x-www-form-urlencoded (form) for the lambda to process. Note that the request never passes the Gateway when used in the code. It does with Postman.


    const config = {  headers: {'Content-Type': 'application/x-www-form-urlencoded',  }};
async getImage() {      let image = this.$refs.image.files[0];      let url = this.$refs.url.value;      let id =this.$refs.id.value;      let name = this.$refs.name.value;      let city = this.$refs.city.value;      let county = this.$refs.county.value;      let state = this.$refs.state.value;      let cost = this.$refs.cost.value;      let wanted = this.$refs.wanted.value;      // alert(id)      // alert(this.$refs.id.value)      if (image) {        // alert("here")        let data = new FormData();        // alert(document.getElementById("id"))        data.append('id', id);        data.append('image', image);        data.append("name",name);        data.append("city",city);        data.append("county",county);        data.append("state",state);        data.append("cost",cost);        data.append("wanted",wanted);        data.append("url",url);        // send fetch along with cookies        await this.$http.post("https://mhw8mm294k.execute-api.us-east-1.amazonaws.com/prod/saveImage",data,config).then(response =>{          // console.log("status: " +response.data)          if(response.status === 200){            this.mb = MilkBottle.convertObject(response.data.body)            // console.log(this.mb)          }        }).catch(err => {          console.log(err)          this.$emit("hasServerError");        })      }      this.$refs.image.value = "";    }

Further information can be found here:CORS error question

Any and all ideas, thoughts, and possible solutions are greatly appreciated. In fact if you read this entire question I appreciated that too (lol).

Thanks in advance.


Viewing all articles
Browse latest Browse all 4019

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>