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

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，但请求的两端都需要大量额外的 header 模糊处理。

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

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

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

<%= jsonString() %>

本地服务器应该呈现类似这样的内容:

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