javascript - Adobe Brackets Live Preview 无法访问 Node.js 服务器

Question

我在使用 Adob​​e Brackets 运行 Node.js 服务器时遇到问题。进入实时预览后(URL 为 http://localhost:SOMERANDOMPORT/path/to/file.html)，我启动服务器。如果我直接在另一个选项卡中键入 http://localhost:3000/test，它会显示正确的 JSON。

然后我向 file.html 中的一个元素添加了一个事件函数，单击该元素后，它会向我的服务器发出 AJAX 请求，并使用响应来更改其某些内部 HTML。但是，在实时预览中单击该元素失败，而是调用错误回调。

我该如何解决这个问题？我怀疑这与 AJAX 请求发送到 http://localhost:SOMERANDOMPORT/test 而不是 http://localhost:3000/test 这一事实有关，但我似乎找不到解决方案。

一切都在本地运行。下面是我的服务器:

var express = require('express');
var mysql = require('mysql');

var app = express();

app.get('/test', function(req, res){
    var connection = mysql.createConnection(...);

    connection.query("SELECT author FROM posts", function(err, results) {
        if (err) {
            console.log(err);
            console.log('Error on retrieving data.');
            res.send(err);
            return;
        }
        console.log(results[results.length - 1]);
        res.send(results[results.length - 1]); // return last row
    });

    connection.end();
});

app.listen(3000);
console.log('Listening on port ' + port);

事件函数:

function getAuthor() {
    $.ajax({
        type: 'GET',
        url: '/test',,
        success: function(data, status) {
            $('.author').text('Authored by ' + data.author);
        },
        error: function(jqXHR, status, error) { // this always get called
            $('.author').text('Something went wrong.');
        }
    });
}

感谢任何帮助。

Answer 1

最简单的解决方法是将实时预览直接指向您自己的 Node 服务器，让它从正确的端口号自行提供页面(而不是从位于不同端口的 Brackets 内置服务器提供页面)。参见 instructions on the Brackets wiki在“使用您自己的后端”下。

缺点是禁用了 HTML 实时更新 - 但您仍将获得 CSS 实时更新，并且 Brackets 退回到更简单的“实时重新加载”以保存 HTML 内容。

要保持启用实时 HTML 更新，您需要以某种方式解决端口号差异问题。您可以对 localhost:3000 基本 URL 进行硬编码以进行测试，但您将运行 same-origin problems due to the port numbers not matching .解决会非常复杂(在您的 Node 服务器上设置 CORS，等等)。

保持完整实时预览体验的另一种选择是填充所有 $.ajax() 调用，以便它们返回硬编码的虚拟数据而无需访问服务器。如果您已经在为单元测试做一些模拟，您可能能够为此重用现有的基础设施。