Question

以下是我的server.js代码的MCVE：

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 - Redirect url和How to redirect user's browser URL to a different page in Nodejs?中阅读了有关重定向的信息，我进行了很多搜索，但没有得到任何提示。谢谢您的宝贵时间！

我也知道表达，但是我不考虑使用框架，因为它们隐藏了核心概念。

编辑：当我尝试不使用回调概念进行重定向时，就可以正常工作，如this video告诉我们的那样。

Answer 1

这不是node.js的问题。这就是浏览器的行为。

Ajax（XHR）不会在浏览器中触发重定向。当浏览器实现XHR时，浏览器开发人员会假定您希望控制页面刷新行为。因此，他们确保XHR不会触发任何默认操作。所有重定向都将保持沉默，并且重定向的结果数据将传递到XHR对象的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()">

Answer 2

除非您对使用建议的当前节点版本有内部了解，否则在处理Node js Web应用程序时应使用express。

Express很简单，您的代码看起来像这样（并重定向）

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

链接： http://expressjs.com/en/4x/api.html#res.redirect

从回调函数内部使用“纯” Node.js进行重定向

2 个答案: