Ajax пост ответ от Express JS продолжает выдавать ошибку

Я испытываю большие затруднения с передачей двунаправленных данных со страницы html в мое приложение node.js и затем обратно на страницу html.

Я почти уверен, что нашел правильное решение, но просто не получилось.

Я использую следующее для моего приложения node.js:

var express = require('/usr/lib/node_modules/express');
var app = express();

app.use(function(err, req, res, next){
  console.error(err.stack);
  res.send(500, 'Something broke!');
});

app.use(express.bodyParser());

app.post('/namegame', function(req, res)
    {
        console.log('Got request name: ' + req.body.name);
        setTimeout(function() 
        { 
            var newName = "New Name-O";
            res.send({name: newName});
        }, 2000);
    }
);

app.listen(8088, function() { console.log("Server is up and running");  });

Вот моя HTML-страница:

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 

    <script type="text/javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() 
        {
            alert("Got here!");

            function DisplayName(response)
            {
                alert(response.newName);
            }

            $("#NameGameIt").click(function(event)
            {
                alert("How about now?");
                //event.PreventDefault();
                var nameSubmitted = document.getElementById("name");
                //var nameSubmitted = "help!!";

                alert("Name: " + nameSubmitted.value);

                $.ajax({
                    type:       "POST",
                    url:        "http://127.0.0.1:8088/namegame",
                    data:       {name: nameSubmitted.value},
                    dataType:   "json",
                    timeout:    2500,
                    success:    function() { alert("???");},
                    error:      function(error1, error2, error3)
                    {   alert("error"); },
                    complete:   function(arg1, arg2, arg3)
                    {   alert("complete");  }
                });

            });

        });

    </script>

</head> 
<body>

<h1>Test form for Ajax</h1>
</br>

Name: <input type="text" id="name" name="name"></br>
<input type="button" value="NameGameIt" id="NameGameIt">
</form>

</body>
</html>

Итак, когда я запускаю приложение узла, сервер работает нормально. Когда я запускаю HTML-страницу, я получаю предупреждение "Got here!" Когда я нажимаю кнопку "NameGameIt", я получаю предупреждение "Как насчет сейчас?" сопровождаемый предупреждением "Имя: " + любое имя, которое я ввел. Как только я отключил это предупреждение, приложение узла сразу увидит сообщение и выведет имя на консоль. Через две секунды, когда узел отправит ответ, браузер перейдет прямо в обработчик ошибок в сообщении ajax. Единственные полезные данные, которые должны появиться в обработчике ошибок, это то, что это "ошибка", которая не очень полезна.

Итак, я знаю, что сообщение попадает в узел со страницы html, потому что оно печатает отправленное мной имя, и я знаю, что страница html возвращает сообщение обратно из узла, потому что оно не выдаст ошибку до истечения времени ожидания на узле. происходит запуск отправки. Но я понятия не имею, почему он продолжает посылать меня в обработчик ошибок вместо успеха. Я прошел весь путь в коде узла с помощью нода-инспектора, и он, кажется, правильно строит пакет с кодом 200 для успеха, и он вызывает.end внутри.send после того, как он сделал пакет, поэтому я не думаю, что одна из этих вещей кусает меня.

Я собираюсь сходить с ума! Если кто-нибудь увидит, что мне не хватает, или у меня появятся какие-либо новые идеи о том, как собрать больше информации, я был бы очень признателен за помощь.

Источник

2 ответа

Решение

Ваш код в порядке, но вы почти наверняка столкнетесь с проблемой междоменных запросов AJAX. Возможно, вы открываете этот HTML-файл в локальной файловой системе и делаете запросы таким образом, что и вызывает эту проблему.

Чтобы исправить это, добавьте app.use(express.static('public')); вот так:

var express = require('/usr/lib/node_modules/express');
var app = express();

app.use(function(err, req, res, next){
  console.error(err.stack);
  res.send(500, 'Something broke!');
});

app.use(express.bodyParser());
app.use(express.static('public'));

app.post('/namegame', function(req, res)
    {
        console.log('Got request name: ' + req.body.name);
        setTimeout(function() 
        { 
            var newName = "New Name-O";
            res.send({name: newName});
        }, 2000);
    }
);

app.listen(8088, function() { console.log("Server is up and running");  });

а затем поместите ваш HTML-файл в папку "public". Как только вы запустите свой сервер, вы можете посетить http://127.0.0.1:8088/file.html и ваш код будет работать нормально.

Источник

В моем случае добавление этого к app.js работает.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

https://enable-cors.org/server_expressjs.html

Источник
Другие вопросы по тегам