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

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

您需要use JSONP克服跨源问题。尽管 Node 服务器和您的自定义访问网页都位于本地主机上，但请注意，配置上存在巨大差异:

• 您的自定义访问网页完全托管在本地 LAMP 堆栈上*。
• Node 仅在本地配置代理/反向代理(感谢 Vagrant 自动化)!

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

*= 假设您正在运行 LAMP 系统。