3

Adobe Brackets を使用した Node.js サーバーの実行に問題があります。ライブ プレビュー (URL はhttp://localhost:SOMERANDOMPORT/path/to/file.html) に入ったら、サーバーを起動します。http://localhost:3000/test別のタブに直接入力すると、正しい JSON が表示されます。

次に、イベント関数を要素に追加しましたfile.html。クリックすると、サーバーに AJAX 要求が行われ、応答を使用してその内部 HTML の一部が変更されます。ただし、ライブ プレビューでの要素のクリックは失敗し、代わりにエラー コールバックが呼び出されます。

どうすればこれを修正できますか? http://localhost:SOMERANDOMPORT/testAJAX リクエストがではなくに送信されるという事実に関係していると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.');
        }
    });
}

助けていただければ幸いです。

4

1 に答える 1

3

最も簡単な解決策は、Live Preview を自分の Node サーバーに直接向けて、正しいポート番号からページ自体を提供できるようにすることです (別のポートにある Brackets の組み込みサーバーからページを提供するのではなく)。「独自のバックエンドを使用する」の下にある、Brackets wiki の手順を参照してください。

欠点は、HTMLのライブ更新が無効になっていることです。ただし、CSS のライブ更新は引き続き利用できます。Brackets は、HTML コンテンツの保存時に、より単純な「ライブ リロード」にフォールバックします。

ライブ HTML 更新を有効にしておくには、何らかの方法でポート番号の違いを回避する必要があります。localhost:3000テスト用にベース URL をハードコードすることもできますが、ポート番号が一致しないため、同一オリジンの問題が発生します。それを回避することはかなり複雑です（ノードサーバーにCORSを設定するなど）。

完全なライブ プレビュー エクスペリエンスを維持するためのもう 1 つのオプションは、すべての呼び出しをシムして$.ajax()、サーバーにヒットすることなくハードコードされたダミー データを返すようにすることです。すでに単体テスト用のモックを作成している場合は、その既存のインフラストラクチャを再利用できる可能性があります。

于 2014-01-27T22:55:41.597 に答える