Перенаправление с использованием "чистого" Node.js из функции обратного вызова

Ниже приведен MCVE моего кода server.js:

let fs = require('fs');
let http = require('http');

http.createServer((req, res) => {
    // Handles GET requests
    if(req.method == 'GET') {
        let file = req.url == '/' ? './index.html': '/login.html'; // just an example
        fs.readFile(file, (err, data) => {
            res.writeHead(200, {'Content-Type': 'text/html'});
            res.end(data);
        });
    } 

    // Handles POST requests
    else {
        read(status => {
            if(status) {
                res.writeHead(302, {
                    'Location': 'http://localhost:8000/login.html',
                    'Content-Type': 'text/html'
                });
                res.end();
                console.log('Redirected!');
            }
        });
    }
}).listen(8000);

// In my actual script, the 'read' function reads JSON files and sends data,
// so I've used the callback function
let read = callback => fs.readFile( './index.html', (err, data) => callback(true) );

И у меня есть два HTML файла, как указано в коде.

index.html

<input type="submit" onclick='let xhr = new XMLHttpRequest(); xhr.open("POST", "http://localhost:8000"); xhr.send();'>

Я использовал встроенный скрипт, чтобы минимизировать трафик в моем MCVE.В целях разработки я буду использовать внешние скрипты на моем сайте

login.html

<h1>Login</h1>

Теперь, когда я открываю http://localhost, index.html хорошо отображается. Как вы заметили, index.html - это просто кнопка. Таким образом, когда я нажимаю на эту кнопку, Ajax-запрос запускается успешно, и все работает нормально (без ошибок консоли), за исключением того факта, что страница не перенаправляет. Я не знаю, что идет не так или чего не хватает.

Я новичок в Node.js и читал о перенаправлении в Nodejs - URL перенаправления и Как перенаправить URL браузера пользователя на другую страницу в Nodejs? Я много искал, но не мог получить подсказку по этому вопросу. Спасибо за ваше время!

Кроме того, я знаю о экспрессе, но я не рассматриваю использование фреймворков, поскольку они скрывают основные понятия.

РЕДАКТИРОВАТЬ: Когда я пытаюсь перенаправить без концепции обратного вызова, то это работает нормально, как это видео нам говорит.

Ответы

Ответ 1

Это не проблема с node.js. Это просто, как ведут себя браузеры.

Ajax (XHR) не вызывает перенаправления в браузере. Когда браузеры реализовали браузер XHR, разработчики предполагали, что вы хотите контролировать поведение обновления страницы. Поэтому они убедились, что XHR не запускает никаких действий по умолчанию. Все перенаправления будут молчать, и результирующие данные перенаправления будут переданы onreadystatechange вызову вашего onreadystatechange объекта onreadystatechange.

Если вы хотите, чтобы перенаправления вызывали обновление страницы, вы можете просто не использовать XHR. Вместо этого сделайте отправку формы:

<!-- index.html -->
<form action="http://localhost:8000" method="post">
    <input type="submit">
</form>

Если вместо этого вы хотите использовать AJAX, вам нужно будет выполнить перенаправление в браузере, как я упоминал выше:

// server.js

// ...

http.createServer((req, res) => {

    // ...

    // Handles POST requests
    else {
        read(status => {
            if(status) {
                res.writeHead(200, {'Content-Type': 'application/json'});
                res.end(JSON.stringify({
                    your_response: 'here'
                }));
            }
        });
    }
}).listen(8000);

Затем обработайте этот ответ в браузере:

index.html

<input type="submit" onclick='let xhr = new XMLHttpRequest();xhr.addEventListener("load", function(){var response = JSON.parse(this.responseText);/* check response if you need it: */if (response.your_response === 'here') {window.location.href = 'http://localhost:8000/login.html';}});xhr.open("POST", "http://localhost:8000");xhr.send();'>

Но это безумно безобразно и почти невозможно прочитать. Я бы предложил рефакторинг этого HTML-кода примерно так:

<!-- index.html -->

<script>
    function handleSubmit () {
      let xhr = new XMLHttpRequest();
      xhr.addEventListener("load", function(){
        var response = JSON.parse(this.responseText);

        /* check response if you need it: */
        if (response.your_response === 'here') {
          window.location.href = 'http://localhost:8000/login.html'; // REDIRECT!!
        }
      });
      xhr.open("POST", "http://localhost:8000");
      xhr.send();
    }
</script>

<input type="submit" onclick="handleSubmit()">

Ответ 2

Вы должны использовать экспресс при работе с веб-приложением узла js, если у вас нет внутреннего понимания текущей версии узла, которую вы используете.

Экспресс прост, и ваш код будет выглядеть так (и перенаправить)

app.get('/index.html',function(req,res,next){
   res.redirect('/path/to/redirect/file')
}

ссылка: http://expressjs.com/en/4x/api.html#res.redirect

Ответ 3

В Express вы можете использовать

res.redirect('http://example.com');

перенаправить пользователя с сервера.

Чтобы включить код состояния 301 или 302, его можно использовать

res.redirect(301, 'http://example.com');