если вы нажмете f12 на ссылке frontend-erjan выше и нажмете кнопку, она даст
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)
в консоли шлюза API в разделе CORS я добавил в заголовки все, что мог придумать:
или картинка из браузера:
не могу понять в чем ошибка
Обновлено: добавление index.html, где функция вызывает backend_url шлюза API. У него нет маршрутов. Я добавил его раньше, но это не имело значения, поэтому я удалил его.
это мой файл s3 index.html:
<!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.info(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>
Вызов API фактически возвращает 404. Ваш FE вызывает URL-адрес https://5y7dfynd34.execute-api.us-east-1.amazonaws.com/
без каких-либо маршрутов. Это намеренно, что это пустой маршрут? URL-адрес при попытке от postman также возвращает 404, что означает, что пустой маршрут не настроен в шлюзе API. Конфигурация шлюза API будет правильно работать для http-статуса 200. Таким образом, вызов правильного маршрута в шлюзе API также должен устранить вашу ошибку CORS.
В стороне: в вашей конфигурации Access-Control-Allow-Origin
вы можете настроить только доменные имена, /voting
или /
не нужны.
теперь я прикрепил "/voting" к var backend_url в s3 index.html - и я получаю ошибку 500 POST....
@ERJAN Вы получаете 500 из-за неправильных настроек интеграции. Если вы можете дать более подробную информацию о вашей настройке, я мог бы помочь вам.
прямо сейчас он также терпит неудачу со странным 404 «Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден)» - но нигде в файле s3 index.html нет favicon.ico!
Вы можете спокойно игнорировать сбои favicon. Хотя рекомендуется добавить favicon в качестве лучшей практики. Ваш браузер пытается добавить фавикон, а вы его не настроили. Обратитесь к этому ТАК посту для более подробной информации. На данный момент вы можете игнорировать эту ошибку и сосредоточиться на 500, исходящих от API.
эта ошибка исчезла! Я загрузил myicon png и добавил код <head profile ...>. теперь только 500. консоль браузера указывает на строку 42 из index.html - "$.post(backend_url, JSON.stringify({"vote": voice}), function(result,status){"
я думаю, что проблема связана с "<form id = "choice" name='form' method = "POST" action = "/">. "action" должно быть "/voting"? как он подключается и вызывает метод API если внутренний URL делает это?
Не уверен, что ваш вопрос. В backend_url нет /voting. Чтобы протестировать свое приложение, вы можете добавить его в файл backend_url. Настоящая проблема заключалась в том, что API возвращал 500 даже при тестировании в Postman. Исправление, которое является решением вопроса в этом посте
я пытаюсь сделать почтовый запрос другим способом - используя метод fetch()
спасибо, что сработало, так это изменить тип маршрута / голосования, чтобы принимать ЛЮБОЙ, а не только POST. я изменил его в шлюзе API
@ERJAN POST
должно было сработать. Изменение его на ANY
не должно было иметь никакого значения. В любом случае, можете ли вы отметить это как ответ, если считаете, что мои предложения помогли вам найти ответ?
есть 2 маршрута, связанных с двумя лямбда-выражениями бэкэнда - /voting и /result, вы имеете в виду, что в моем s3 index.html у меня должен быть маршрут backend_url +, а не только сам backend_url? я обновил вопрос и добавил файл s3 static index.html