XMLHttpRequest的不能加载使用jQuery的URL

Question

我想从“远程”的网站得到一些JSON数据。 我运行99000端口上我的web服务，然后，我启动我的网站的99001端口（HTTP：//本地主机：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技术，它可以归结为：

要开始请求：添加新<script>标签与远程URL，然后确保远程URL返回调用回调函数有效的JavaScript文件。一些服务支持这种（让你的名字在一个GET参数回调）。

其他简单的办法，将是您的本地服务器，它获取远程请求，然后就“转发”回你的JavaScript上创建一个“代理”。

修改/添加：

我看到的jQuery已经内置了对JSONP支持，通过检查URL包含“回调=？” （其中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：$就（）+ JSONP：

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

<强>解决方案2：$就（）+ 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.getJSON/

Answer 4

找到可能的解决方法，我不相信提到。

下面是问题的一个很好的描述： http://www.asp.net/web- API /概览/安全/启用交原点请求功能于web的API

基本上只要使用形式/网址编码/纯文本内容类型你的罚款。

$.ajax({
    type: "POST",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'text/plain'
    },
    dataType: "json",
    url: "http://localhost/endpoint",
    data: JSON.stringify({'DataToPost': 123}),
    success: function (data) {
        alert(JSON.stringify(data));
    }
});     

我用它与ASP.NET WebAPI2。所以在另一端：

public static void RegisterWebApi(HttpConfiguration config)
{
    config.MapHttpAttributeRoutes();

    config.Formatters.Clear();
    config.Formatters.Add(new JsonMediaTypeFormatter());

    config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/plain"));
}

此方式解析纯文本内容类型时的Json格式化被使用。

和不Web.config中不要忘了：

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

希望这有助于。

Answer 5

我使用的WebAPI 3和正面临同样的问题。这个问题有决心，@Rytis增加了他的解决方案。我认为，在3的WebAPI，我们并不需要定义方法RegisterWebApi。

我的变化仅在web.config文件和工作。

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

感谢您的解决方案@Rytis！