2012-04-22 32 views
3

我一直在玩node.js,然後遇到了express框架。當使用不同的端口時,我似乎無法使其工作。node.js,express和不同的端口

我有我的阿賈克斯http://localhost:8888這是我在我的Mac上運行的MAMP服務器。

$.ajax({ 
    url: "http://localhost:1337/", 
    type: "GET", 
    dataType: "json", 
    data: { }, 
    contentType: "application/json", 
    cache: false, 
    timeout: 5000, 
    success: function(data) { 
     alert(data); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { 
     alert('error ' + textStatus + " " + errorThrown); 
    } 
}); 

正如你所看到的,我的node.js服務器正在運行在http://localhost:1337/上。結果沒有任何東西被返回,並且拋出一個錯誤。

有沒有辦法解決這個問題?

感謝

+1

我明白你的問題的方式,你正在從localhost:8888加載一個網頁,然後做一個$ .ajax調用localhost:1337。那是對的嗎?如果是這樣,那麼你正在實施相同的原產地政策。 – Barend 2012-04-22 08:13:12

+0

這是正確的。那麼解決這個問題的唯一方法就是從node.js服務器運行我的網站,使其具有相同的端口?但是如果我在我的網站上託管的端口80上實現了這個動作,並且我想連接到node.js服務器以進行搜索等請求呢?大多數人如何做到這一點? – 2012-04-22 08:16:34

+1

首選方法(恕我直言)是使用反向代理,使所有請求都轉到同一主機/端口,並在幕後重新路由它們。一個不常見的解決方法是使用JSONP,但由於其安全性影響,我個人不喜歡這種方法。 – Barend 2012-04-22 08:18:24

回答

4

你的問題是,你是想做一個跨域請求,這不是通過瀏覽器(允許的是,相同的主機名與不同端口數的不同出於此目的)。您有三種選擇:

1.代理請求。

如果可以,請執行此操作。寫一些運行於:8888服務器 上的代碼,該代碼將請求代理到1337服務器。您還可以通過 貼在他們兩人面前的代理做到這一點,像Nginx的是 在這個非常好,容易建立

2.使用CORS(跨源資源共享)

請參閱:http://en.wikipedia.org/wiki/Cross-origin_resource_sharinghttps://developer.mozilla.org/en/http_access_control

這意味着在響應中添加一些標題以告訴瀏覽器在這裏交叉源請求是正確的。在您的Express服務器添加中間件這樣的:

function enableCORSMiddleware (req,res,next) { 
    // You could use * instead of the url below to allow any origin, 
    // but be careful, you're opening yourself up to all sorts of things! 
    res.setHeader('Access-Control-Allow-Origin', "http://localhost:8888"); 
    next() 
    } 
server.use(enableCORSMiddleware); 

3.使用JSONP

這是你編碼您的 「AJAX」 響應作爲Javascript代碼一招。然後,您要求瀏覽器加載該代碼,瀏覽器將很高興地將腳本加載到源代碼中,以便解決跨源問題。它也讓其他人也可以繞過它,所以確保這就是你想要的!

在您需要包裝在JavaScript函數調用你的迴應在服務器端,表示如果啓用這樣的「JSONP回調」選項,可以自動做到這一點:

server.enable("jsonp callback"); 

然後用發送您迴應響應 「JSON()」 方法:

server.get("/ajax", function(req, res) { 
    res.json({foo: "bar"}); 
}); 

在客戶端,你可以在jQuery的enanble JSONP只是在具體的數據類型選項改變 「JSON」 到 「JSONP」:

dataType: "jsonp",