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

【问题标题】：Get data from third party Node.js server hosted on Vagrant VM using jQuery - JSONP使用 jQuery - JSONP 从托管在 Vagrant VM 上的第三方 Node.js 服务器获取数据
【发布时间】：2016-11-09 18:37:47
【问题描述】：

我有一个 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

【问题讨论】：

那么有什么意义呢？希望url: ':3000/' 包含节点服务器的完整绝对url。如果你得到一个页面为什么你method: "POST"代码？
正确。你需要使用JSONP请看这个解决方案Basic example of using .ajax() with JSONP
如果您的页面已经在 localhost:3000 上，请将您的 url 更改为 '/'。
@morels 不是针对不同域的 JSONP 吗？他们都在本地主机上。虽然这确实有效，但谢谢！

标签： jquery node.js vagrant jsonp

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

使用网址：“/” 默认主机名使用当前在 url window.location.host 在您的情况下为 localhost:3000。只需指定 / 作为路径

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

你需要做的三件事：

url: ':3000/'不正确，需要改成url: 'localhost:3000'
您需要将您的 HTML、javascript、css、...文件放在运行在本地主机上的 Web 服务器（例如 apache、nginx、..）（例如：@987654324 @)。 不要通过右键单击打开 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）中访问localhost:3000/page-contain-your-javascript.html你的javascript和API时，你就可以正常使用AJAX了。

希望对你有帮助:)

【讨论】：