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>
