CORS issue - Access-Control-Allow-Origin Error Upon POST (Jquery Ajax)

Question

I am making a POST request to AWS s3 API gateway using JQUERY & AJAX. Upon submit, the shadow is updated. However I get an error in the console. Here is the ajax part of the code,

var myJSON = JSON.stringify(obj);
$.ajax({
   type: "POST",
   url:  "<aws-url>" ,
   data: myJSON,
   crossDomain : true,
   //dataType: 'jsonp',
   headers :{
            'Content-Type':'application/x-www-form-urlencoded'
            },
   success: function(result) {
        console.log("done");
   }
});

The POST works and the shadow is updated, but I still get this error at the console. Also I am aware that postman can't be used with POST method. Here is the error: Failed to load :No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s3-ap-southeast-1.amazonaws.com' is therefore not allowed access.

I don't understand whats going on. Please help!!

Possible duplicate of [Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present) — Igor, Oct 05 '17 at 10:01
Actually I have already seen that Post and that did not help. So I asked this question myself. Actually I am posting to an API gateway in S3. Jsonp didnt work as i am making a POST request. Also, as I said, the POST works but I get the error in my console which reveals the url. Thus, I want to get rid of the error. — Namah, Oct 06 '17 at 07:21

score 0 · Answer 1 · answered Oct 05 '17 at 10:01

0

Please enable CORS in you API gateway like below.

If you don't have OPTIONS added, please follow below steps (If OPTIONS already there just add CORS),

Create a new OPTIONS method under the /services resource
Create and populate the Access-Control-Allow-Origin/Method/Headers in the OPTIONS method.

Enable CORS like below after creating OPTIONS

answered Oct 05 '17 at 10:01

Vijayanath Viswanathan

8,027
3
25
43

Thank you for your answer but I already enabled CORS. I have set Access-Control-Allow-Origin to '*' and Access-Control-Allow-Headers to the default values provided to me that are Content-Type,X-Amz-Date,Authorizaiton, X-API-key and X-Amz-Security-Token. Also I set the Access-Control-Allow-Method to POST, GET and OPTIONS. Still doesn't work. The methods are lambda functions and do not require authorization. However I have not checked on any of the Gateway Responses. Please help. – Namah Oct 06 '17 at 09:47
I am sure you might have deployed API after the changes but just want to see confirm it – Vijayanath Viswanathan Oct 06 '17 at 10:46
Yes. I deployed the API and then made a POST request which updated the shadow. However I think i don't get the access-control-allow-origin in the response header. The response itself is null which means the POST was sucessful. Still the error in the console has not been solved. – Namah Oct 07 '17 at 08:35
Can you please share your handler code if API gateway is triggering Lambda? – Vijayanath Viswanathan Oct 07 '17 at 08:43
Can you please share the handler as well if it is connected to Lambda? – Vijayanath Viswanathan Oct 07 '17 at 09:02
PROBLEM SOLVED!!!!!!!!!! I went to OPTIONS method. There I went to Method Response and inside Http status I added Access-Control-Allow-Header, Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Allow-Methods. I figured as the prefilght request was OPTIONS method, so I should change the settings in the options method and it worked. Thanks so much for the reply though :) – Namah Oct 08 '17 at 12:10

CORS issue - Access-Control-Allow-Origin Error Upon POST (Jquery Ajax)

1 Answers1