AWS S3 static site CORS jquery ajax POST to API Gateway

Question

We have a static web site hosted on s3.
From the page we do a jquery ajax post to AWS api gateway/lambda function.
I am not sure how the OPTIONS thing works but when we enable the 'chrome allow cross origin plugin' enabled everything works fine (we get the JSON response back),
When the plugin is disabled we get the error "Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response"
Is it possible to do the POST without the plugin and get a successful response back We have also enabled CORS on the API gateway.

Here is the AJAX POST

$.ajax({
type: 'POST',
url: API_URL,
data: JSON.stringify(inputdata),
dataType: 'json',
 beforeSend: function(xhr) {
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.setRequestHeader("Access-Control-Allow-Methods", "OPTIONS,POST");
xhr.setRequestHeader("Access-Control-Allow-Headers", "X-Requested-With,Access-Control-Allow-Headers,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token");
xhr.setRequestHeader("Content-Type", "application/json");
 //xhr.setRequestHeader("origin", "http://evil.com/");
},
/*
headers: {

        'Access-Control-Allow-Headers':'Access-Control-Allow-Headers,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
        'Access-Control-Allow-Origin' : '*',
        'Access-Control-Allow-Methods' : 'OPTIONS,POST',
        'Access-Control-Allow-Credentials' : true,
        'Content-Type': 'application/json; charset=utf-8'
},*/
crossDomain: true,
success: function (data) {getdatasuccess(data)},
error: function(data){
console.log("error = "+JSON.stringify(data));
}
});

Response headers when 'allow cross origin plugin' plugin is enabled

:authority:64j2k6w2dc.execute-api.us-east-1.amazonaws.com
:method:OPTIONS
:path:/prod
:scheme:https
accept:/
accept-encoding:gzip, deflate, br
accept-language:en-US,en;q=0.8
access-control-request-headers:access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,content-type
access-control-request-method:POST
origin:http://evil.com/
user-agent:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Response headers when 'allow cross origin plugin'plugin is disabled

:authority:64j2k6w2dc.execute-api.us-east-1.amazonaws.com
:method:OPTIONS
:path:/prod
:scheme:https
accept:/
accept-encoding:gzip, deflate, br
accept-language:en-US,en;q=0.8
access-control-request-headers:access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,content-type
access-control-request-method:POST
origin:https://s3.amazonaws.com
referer:https://s3.amazonaws.com/mysitetest/htmlpage2.html
user-agent:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

You are causing yourself even more problems by trying to set those headers in your ajax request. — Kevin B

Dmitry Grinko Dmitry Grinko · Accepted Answer · 2017-10-11T20:37:51

It works for me:

API Gateway > Method OPTIONS > Integration Response > Header Mappings :

Access-Control-Allow-Headers : 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-XSRF-TOKEN,Access-Control-Allow-Headers,Access-Control-Allow-Origin'

Access-Control-Allow-Methods: 'POST,GET,OPTIONS'

Access-Control-Allow-Origin: '*'

And remove unnecessary Headers from Client!

AWS S3 static site CORS jquery ajax POST to API Gateway

1 Answers