使用 jQuery 从托管在 Vagrant VM 上的第三方 Node.js 服务器获取数据 - JSONP

Question

我有一个 Node.js 服务器正在侦听 localhost:3000 作为黑盒工作 输出 UI 我想加载到本地网站。

jQuery中写的消费服务是：

$('.my_selector').click(function(){
    $.ajax({
        url: ':3000/',
        method: "POST",
        success: function(data) {
            $("#content").append(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert('error ' + textStatus + " " + errorThrown);
        }
    });
});

它不是直接访问页面，而是加载内容并将其附加到 #content。

问题是代码不工作。

编辑：

如果我将 localhost:3000 设置为 url 我会得到 XMLHttpRequest Exception:

jquery.min.js:4 XMLHttpRequest cannot load localhost:3000/. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource

Answer 1

使用url: "/" 在您的情况下，默认主机名使用 url window.location.host localhost:3000。只需为路径指定 /

Answer 2

将 url: ':3000/' 更改为 url : "http://127.0.0.1:3000"。

Answer 3

您需要use JSONP 来解决跨源问题。虽然Node服务器和你的自定义访问网页都在localhost上，但是请注意配置上的巨大差异：

您的自定义访问网页 完全托管 在本地 LAMP 堆栈上*。
节点仅 proxy/reverse-proxy 在本地配置（感谢 Vagrant 自动化）！

Node服务器的真实（虚拟）IP是在vagrant VM上配置的IP，您可以在opening a ssh session之后使用ifconfig查看它。这样，从本地托管的页面收到的 HTTP 响应在 header 中具有不同的 IP 和域，并且会触发跨源异常。

*= 假设您是运行一个 LAMP 系统。

Answer 4

您需要做的 3 件事：

url: ':3000/'不正确，需要改成url: 'localhost:3000'
您需要将您的HTML、javascript、css、...文件放在网络服务器上（例如apache , nginx, ..) 在您的本地主机上是运行（例如：localhost:4000）。 不要通过右键单击打开 HTML 文件然后选择使用 Chrome 或类似的方式打开，它不会工作。并访问包含 javascript 文件的页面（例如：localhost:4000/page-contain-your-javascript.html）
处理跨域问题：

使用 nginx 等反向代理将请求分派到 localhost:3000/page-contain-your-javascript.html 到 localhost:4000/page-contain-your-javascript.html。现在，当您访问 localhost:3000/page-contain-your-javascript.html 您的 javascript 和 API 现在 在同一个域 (localhost:3000) 中，您可以使用 AJAX 通常。

希望对您有所帮助:)

使用 jQuery 从托管在 Vagrant VM 上的第三方 Node.js 服务器获取数据 - JSONP

Get data from third party Node.js server hosted on Vagrant VM using jQuery - JSONP

jquery

jsonp

node.js

vagrant