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:
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.