Node.js、Express以及不同的端口

Question

我一直在学习node.js，后来接触到了express框架。当使用不同的端口时，我似乎无法让它正常工作。

我的ajax是在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/。然而，这并没有返回任何内容，反而出现了错误。

有什么解决方法吗？

谢谢，

Ben

- Ben Sinclair

---

我理解你的问题是，你正在从localhost:8888加载一个网页，然后进行了一个$.ajax调用到localhost:1337。是这样吗？如果是这样，那么你就遇到了同源策略的限制。 - Barend

那是正确的。那么唯一的解决方法就是在node.js服务器上运行我的网站，这样它就有了相同的端口？但是如果我将其实时托管在端口80上的网站，并希望连接到node.js服务器以发出请求（例如搜索），该怎么办？大多数人是如何解决这个问题的？ - Ben Sinclair

首选方法（在我看来）是使用反向代理，使所有请求都转到相同的主机/端口，并在幕后重新路由它们。一个不太常见的解决方法是使用JSONP，但我个人不喜欢它，因为它存在安全隐患。 - Barend

正如@BarendGarvelink所提到的，您应该为此情况使用反向代理。 - Amit

Answer 1

你遇到的问题是试图进行跨域请求，而浏览器不允许这样做（是的，即使使用不同的端口，相同的主机名也被视为不同的来源）。你有三个选择：

1. 代理请求。 如果可以，请尝试这种方法。编写一些代码在:8888服务器上运行来代理到1337服务器。你还可以在它们之间添加代理，例如Nginx非常擅长此项工作，而且易于设置。

2. 使用CORS（跨源资源共享）。 请参考：http://en.wikipedia.org/wiki/Cross-origin_resource_sharing 和 https://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回调”选项，express可以自动完成此操作，如下所示：

server.enable("jsonp callback");

然后使用响应的 "json()" 方法发送您的响应：

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

在客户端，您可以通过将dataType选项中的“json”更改为“jsonp”来在jQuery中启用JSONP：

dataType: "jsonp", 

- Thomas Parslow