如何在尝试访问localhost时避免跨源策略错误？

Question

我希望在外部服务器上上传一个静态网站，该网站将尝试从localhost:3000获取JSON数据（服务器程序已经在用户的计算机上运行）。

我试图用这样的jQuery做到这一点：

$.getJSON("http://localhost:3000/page", function(data){
    // process data...
});

为什么我会收到跨源政策错误，如何阻止它们？ 我以为访问JSON数据应该否定那些跨站点错误？

更新1

我刚刚按照建议尝试了带回调的JSONP，但这里有一个奇怪的问题：如果我添加一个指向localhost:3000/page URL的脚本标记，则加载回调并在页面加载完成后正确显示数据，但这不是我的目标。

如果我使用$.getJSON方法尝试相同的操作，我仍然会得到与以前相同的错误：

XMLHttpRequest cannot load http://localhost:3000/page. Origin http://localhost is not allowed by Access-Control-Allow-Origin. 。

Answer 1

有趣的想法！

但localhost与somewebsite.com完全不同。 因此适用相同的原产地政策。 你需要：

• JSONP这意味着localhost上的服务器需要支持在自定义回调中包装JSON
• CORS允许真正的跨域ajax，但在请求的两端都需要大量额外的头部fuzting。

JSONP可能是最容易实现的。 来自$.getJSON()的文档：

如果URL包含字符串“callback =？” （或类似的，由服务器端API定义），请求被视为JSONP。 有关更多详细信息，请参阅$ .ajax（）中有关jsonp数据类型的讨论。

然后，您的localhost服务器只需要使用jQuery将传入的回调参数。这意味着不是简单地渲染：

<%= jsonString() %>

本地服务器应该呈现更像这样的东西：

<% if (params.callback) { %>
  <%= params.callback %>(<%= jsonString %>);
<% } else { %>
  <%= jsonString %>
<% } %>