js获取网页标题 XMLHttpRequest无法使用jQuery加载URL



js获取网页标题 (4)

我正试图从“远程”网站获取一些json数据。 我在99000端口上运行我的Web服务然后,我在99001端口上启动我的网站(http:// localhost:99001 / index.html)。

我收到以下消息:

    XMLHttpRequest cannot load http://localhost:99000/Services.svc/ReturnPersons. Origin http://localhost:99001 is not allowed by Access-Control-Allow-Origin.

即使我将我的网页作为HTML文件启动,我也会这样:

    XMLHttpRequest cannot load http://localhost:99000/Services.svc/ReturnPersons.Origin null is not allowed by Access-Control-Allow-Origin.

Web服务返回数据。 我尝试捕获这样的数据项:

var url = "http://localhost:99000/Services.svc/ReturnPersons";
$.getJSON(url, function (data) {
success: readData(data)
});
function readData(data) {
    alert(data[0].FirstName);
}

而我正试图得到这种结构:

[{"FirstName":"Foo","LastName":"Bar"},{"Hello":"Foo","LastName":"World"}]

你知道我为什么会收到这个错误吗?


Answer #1

你不能做一个XMLHttpRequest交叉域,唯一的“选项”是一种名为JSONP的技术,它归结为:

要启动请求:使用远程URL添加新的<script>标记,然后确保远程url返回调用回调函数的有效javascript文件。 有些服务支持此功能(并允许您在GET参数中命名回调)。

另一个简单的方法是在本地服务器上创建一个“代理”,它获取远程请求,然后将其“转发”回你的javascript。

编辑/添加:

通过检查URL是否包含“callback =?”,我看到jQuery内置了对JSONP的支持。 (jQuery将用实际的回调方法替换?) 但是您仍然需要在远程服务器上处理它以生成有效的响应。


Answer #2

在新的jQuery 1.5中,您可以使用:

$.ajax({
    type: "GET",
    url: "http://localhost:99000/Services.svc/ReturnPersons",
    dataType: "jsonp",
    success: readData(data),
    error: function (xhr, ajaxOptions, thrownError) {
      alert(xhr.status);
      alert(thrownError);
    }
})

Answer #3

提供3个有效的解决方案

给定一个外部JSON:

myurl = 'http://wikidata.org/w/api.php?action=wbgetentities&sites=frwiki&titles=France&languages=zh-hans|zh-hant|fr&props=sitelinks|labels|aliases|descriptions&format=json'

解决方案1:$ .ajax()+ jsonp:

$.ajax({
  dataType: "jsonp",
  url: myurl ,
  }).done(function ( data ) {
  // do my stuff
});

解决方案2:$ .ajax()+ json +&calback =?:

$.ajax({
  dataType: "json",
  url: myurl + '&callback=?',
  }).done(function ( data ) {
  // do my stuff
});

解决方案3:$ .getJSON()+ calback =?:

$.getJSON( myurl + '&callback=?', function(data) {
  // do my stuff
});

文件: http://api.jquery.com/jQuery.ajax/http://api.jquery.com/jQuery.ajax/http://api.jquery.com/jQuery.getJSON/


Answer #4

我正在使用WebAPI 3并面临同样的问题。 随着@Rytis添加他的解决方案,问题已经解决。 我认为在WebAPI 3中,我们不需要定义RegisterWebApi方法。

我的更改仅在web.config文件中,并且正在运行。

<httpProtocol>
 <customHeaders>
 <add name="Access-Control-Allow-Origin" value="*" />
 <add name="Access-Control-Allow-Methods" value="GET, POST" />
</customHeaders>
</httpProtocol> 

谢谢你的解决方案@Rytis!





cors