ensure CORS response header values are valid - when using apigateway and s3
http://frontend-erjan-vote.s3-website-us-east-1.amazonaws.com/ s3 with static website has 2 buttons, i send post request when clicking a button, it goes to be processed via api gateway backend url - https://5y7dfynd34.execute-api.us-east-1.amazonaws.com
if you press f12 on the frontend-erjan link above and click on button it gives
A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request .
To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values.
Note that if an opaque response is sufficient, the request's mode can be set to no-cors to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque).
1 request
Request Status Preflight Request (if problematic) Header Problem Invalid Value (if available)
5y7dfynd34.execute-api.us-east-1.amazonaws.com/ blocked
5y7dfynd34.execute-api.us-east-1.amazonaws.com/ Access-Control-Allow-Headers Invalid Value
Learn more: Cross-Origin Resource Sharing (CORS)
in api gateway console in CORS section i added all things to headers i could think of:
or the picture from browser:
i cant see what the error is
EDIT: adding index.html where function calls the api gateway backend_url. It has no routes. I did add it before, but it did not make difference so i removed it.
this is my s3 index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A or B?</title>
<base href="/index.html">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div id="content-container">
<div id="content-container-center">
<h3>A or B?</h3>
<form id="choice" name='form' method="POST" action="/">
<button id="a" type="submit" name="vote" class="a" value="a">A</button>
<button id="b" type="submit" name="vote" class="b" value="b">B</button>
</form>
<div id="tip">
(Подсказка: вы можете голосовать несколько раз)
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
var backend_url = "https://5y7dfynd34.execute-api.us-east-1.amazonaws.com/"
$.ajaxSetup({
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
});
$(document).on('click','button[name=vote]',function(){
vote = this.value;
$.post(backend_url, JSON.stringify({ "vote": vote }), function(result,status){
console.log(result);
if ("success" == status) {
usedButton = $('button.' + vote);
usedButton.prop('disabled', true);
usedButton.html(vote + ' <i class="fa fa-check-circle"></i>');
usedButton.css('opacity','0.5');
unusedButton = $('button.' + (vote == 'a' ? 'b' : 'a'));
unusedButton.prop('disabled', false);
unusedButton.html(vote == 'a' ? 'b' : 'a');
unusedButton.css('opacity','1');
setTimeout(function(){usedButton.prop('disabled', false); usedButton.html(vote);}, 2000);
} else {
alert("error! :(");
}
});
return false;
});
</script>
</body>
</html>
The API call is actually returning 404. Your FE is calling the url https://5y7dfynd34.execute-api.us-east-1.amazonaws.com/ without any routes. Is it intentional that it is an empty route? The URL when attempted from postman also returns a 404 which means that an empty route is not configured in the API gateway. API gateway configuration will correctly work for http status 200. So calling the right route in API gateway should resolve your CORS error also.
Aside: In your Access-Control-Allow-Origin configuration, you can configure only the Domain Names, /voting or / is not needed.