Adob​​e Brackets實時預覽無法訪問Node.js服務器

Question

我在使用Adobe 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

最簡單的解決方法是直接將實時預覽指向您自己的節點服務器，讓它從正確的端口號提供頁面本身（而不是從位於不同端口的Brackets內置服務器提供頁面）。請參閱「使用您自己的後端」下的instructions on the Brackets wiki。

下降是禁用HTML實時更新 - 但你仍然會得到CSS實時更新，並且Brackets在保存HTML內容時會回到更簡單的「實時重新加載」。

爲了保持啓用HTML更新，您需要以某種方式解決端口號差異問題。您可以硬編碼一個localhost:3000基準網址進行測試，但您會運行same-origin problems due to the port numbers not matching。在附近工作時，會相當複雜（在節點服務器上設置CORS等）。

保持完整實時預覽體驗的另一個選項是填充所有$.ajax()調用，以便它們返回硬編碼的虛擬數據而不會觸碰服務器。如果你已經在做單元測試的一些嘲諷，你可能可以重用這個現有的基礎設施。