尝试访问本地主机时如何避免跨源策略错误？

Question

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

我正在尝试使用 jQuery 来做到这一点，如下所示：

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

为什么我会收到跨域策略错误以及如何阻止它们？我认为访问 JSON 数据应该可以消除那些跨站点错误？

更新 1

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

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

XMLHttpRequest 无法加载 http://localhost:3000/page。 Access-Control-Allow-Origin 不允许来源 http://localhost。。

Answer 1

有趣的想法！

但 localhost 与 somewebsite.com 是完全不同的域。因此适用同源政策。您需要：

• JSONP 这意味着 localhost 上的服务器需要支持将 JSON 包装在自定义回调
• CORS 中，这允许真正的跨域 ajax，但有很多额外的功能标头模糊测试是请求的两端都需要。

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

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

然后，您的 localhost 服务器只需要使用 jQuery 将传入的回调参数。这意味着

<%= jsonString() %>

本地服务器应该呈现更像这样的内容，而不是简单地呈现：

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