Javascript AJAX POST проблема - PullRequest
Новая
       29

Javascript AJAX POST проблема

0 голосов
/ 08 января 2019

У меня проблема с простой веб-страницей на javascript, размещенной на AWS S3, которая создает HTTP-шлюз POST - AWS API с использованием ajax.

Я могу сделать звонок, используя curl с успехом:

curl -X POST -H "Content-Type: application/json" https://xxxx.execute-api.eu-west-1.amazonaws.com/dev/ankieta --data @data.json

файл data.json:

{ "imie": "jasiu", "ocena": "6", "opinia": "niezle" }

Мой код JavaScript выглядит следующим образом. 

<html>
<body>
<title>Ankieta</title>

<h1>Wypelnik ankiete</h1>
<button type="button" onclick="uruchom()">JSON</button>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
function uruchom() {
    var resultDiv = $("#resultDivContainer");
    var myData = {"imie": "Michal"};
        $.ajax({
            url: "https://xxxx.execute-api.eu-west-1.amazonaws.com/dev/ankieta",
            type: "POST",
            data: JSON.stringify(myData),
            crossDomain: true,
            contentType: "application/json",
            dataType: 'jsonp',
            headers: {
                "Access-Control-Allow-Origin": "*"
            },
            success: function () {
                alert("ok");
            },
            error: function() {
                alert("zonk");
            }

        });
};

</script>
</body>
</html>

Это ошибка, которую я получаю от веб-отладки: GET https://xxxx.execute-api.eu-west-1.amazonaws.com/dev/ankieta?callback=jQuery17203000220305941388_1546897907447&{%22imie%22:%22Michal%22}&_=1546897908872 net::ERR_ABORTED 400

Похоже, что есть проблема с обратным вызовом и в URL меняются мои данные из тела. В моем случае я не хочу проверять всякий раз, когда обратный вызов в порядке - хочу просто POST-данные.

Спасибо за любые предложения.

Ответы [ 3 ]

0 голосов
/ 08 января 2019

Не строковый объект данных. JQuery делает это для вас. Просто передайте объект. 

var myData = {"imie": "Michal"};
        $.ajax({
            url: "https://xxxx.execute-api.eu-west-1.amazonaws.com/dev/ankieta",
            type: "POST",
            data: myData,
            crossDomain: true,
            contentType: "application/json",
            dataType: 'jsonp',
            headers: {
                "Access-Control-Allow-Origin": "*"
            },
            success: function () {
                alert("ok");
            },
            error: function() {
                alert("zonk");
            }

        });
0 голосов
/ 08 января 2019

Спасибо за предложения и ответы, особенно в направлении CORS. Я был уверен, что в моем API GW включена поддержка CORS, но я не проверял стоящую за ним AWS Lambda и обнаружил, что не возвращаю заголовок «Access-Control-Allow-Origin» обратно клиенту.

exports.handler = function(event, context, callback) { callback(null, { "statusCode": 200, "headers": { "Access-Control-Allow-Origin": "*" } }); };

После применения я могу отправить HTTP POST.

0 голосов
/ 08 января 2019

POST нельзя использовать для отправки запроса JSONP. JSONP на самом деле не использует AJAX, он работает, создавая тег <script>, чей src является URL. Нет способа отправить данные POST таким способом, поэтому data добавляется в качестве параметров URL.

Если этот API ожидает JSON в данных POST, вы не можете использовать dataType: 'jsonp'. Вы должны использовать dataType: 'json'. Если API не разрешает CORS, вам нужно использовать прокси на вашем сервере, чтобы сделать фактический запрос, вы не можете сделать это прямо из браузера.

...