如何在尝试访问localhost时避免跨源策略错误? [英] How can you avoid cross-origin policy error when trying to access localhost?
问题描述
我想在外部服务器上上传一个静态网站,试图从 localhost:3000
获取JSON数据(服务器程序已经在用户上运行计算机)。
I want to have a static website uploaded on an external server that will try to get JSON data from localhost:3000
(a server program will already be running on the user's computer).
我正在尝试使用这样的jQuery:
I'm trying to do this with jQuery like this:
$.getJSON("http://localhost:3000/page", function(data){
// process data...
});
为什么我会收到跨源政策错误,如何阻止它们?我认为访问JSON数据应该否定那些跨站点错误?
Why am I getting cross-origin policy errors and how can I stop them? I thought accessing JSON data was supposed to negate those cross-site errors?
更新1
我刚刚按照建议尝试了带回调的JSONP,但这里有一个奇怪的问题:如果我添加一个指向 localhost:3000 / page
URL的脚本标记,加载回调并在页面加载完成后正确显示数据,但这不是我的目标。
I have just tried the JSONP with callback as suggested but here's a weird issue: If I add a script tag that points to the localhost:3000/page
URL, the callback is loaded and the data is displayed properly when the page is done loading, but this is not what I am aiming for.
如果我尝试使用相同的东西 $。getJSON
方法,我仍然得到与以前相同的错误:
If I try the same thing using the $.getJSON
method, I still get the same error as before:
XMLHttpRequest不能加载http:// localhost:3000 / page。 Access-Control-Allow-Origin不允许使用原始http:// localhost。
。
推荐答案
有趣的想法!
但是 localhost
与 somewebsite.com完全不同的域
。因此适用相同的原产地政策。您需要:
But localhost
is a totally different domain from somewebsite.com
. So the same origin policy applies. You need either:
- JSONP Which means the server on
localhost
needs to support wrapping the JSON in a custom callback - CORS Which allows true cross domain ajax, but lots of extra header fuzting is required on both ends of the request.
JSONP可能是最容易实现的。来自 $的文档.getJSON()
:
JSONP is probably the easiest to pull off. From the docs for $.getJSON()
:
如果网址包含字符串callback =? (或类似的,由
服务器端API定义),请求被视为JSONP。有关详细信息,请参阅$ .ajax()中有关jsonp数据类型的
讨论。
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将传入的回调参数。这意味着不是简单地渲染这个:
Your localhost
server then simply needs to use that callback parameter that jQuery will pass in. Meaning that instead of simply rendering this:
<%= jsonString() %>
本地服务器应该呈现更像这样的东西:
The local server should render something more like this:
<% if (params.callback) { %>
<%= params.callback %>(<%= jsonString %>);
<% } else { %>
<%= jsonString %>
<% } %>
这篇关于如何在尝试访问localhost时避免跨源策略错误?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!