XMLHttpRequest无法使用jQuery加载URL

我试图从“远程”网站获取一些json数据。我在99000端口上运行我的Web服务，然后在99001端口上启动我的网站（http：// localhost：99001/index.html）。XMLHttpRequest无法使用jQuery加载URL

我得到以下信息：

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"}]

你知道为什么我得到这个错误？

来源

2010-09-30 Zakaria

你不能做一个XMLHttpRequest的跨域，唯一的“选项”将是一个叫做JSONP技术，它可以归结为：

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

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

编辑/添加：

我看到的jQuery已经内置了对JSONP支持，通过检查URL中包含 “？回调=” （jQuery将用实际的回调方法替换？）。但是你仍然需要在远程服务器上处理它以生成有效的响应。

来源

2010-09-30 08:34:19 CharlesLeaf

我通过添加“＆callback =？”解决了这个问题。到URL。谢谢！ – Zakaria 2010-09-30 09:58:45

我是否必须在远程服务器上的服务器脚本中指定/实现任何内容？ – j7nn7k 2011-08-01 13:49:57

是的，你的服务器通常返回一个JSON字符串，例如'{“foo”：“bar”}''''''''''''''''''''''''''''''''''''''''''例如'myFunction（{“foo”：“bar”}）;' – CharlesLeaf 2011-08-02 12:36:50

在新的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); 
    } 
})

来源

2011-02-10 02:57:21 Slavomir

它不应该只是“成功：readData”吗？ – 2013-03-18 03:47:10

我得到了一个错误，因为SyntaxError：意外的令牌： – 2015-07-22 07:48:24

我是，在你的回应中猜测它是额外的“：”。你能粘贴整个信息吗？ – Slavomir 2015-07-24 03:20:30

Fiddle with 3 working solutions在行动。

鉴于外部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/

来源

2013-04-01 16:26:01 Hugolpz

JSfiddle修复了以下内容#wikidata API更改，jsfiddle改进完成，编辑改进完成！ – Hugolpz 2013-10-24 14:21:16

在** HTTPS中无效**点击链接查看https://jsfiddle.net/HNPyc/98/ – 2016-12-07 11:53:38

@TuhinPaul：当你在** https **小提琴时，你不能请求** http * * wikidata或其他http，这将是一个安全漏洞。您可以执行http-http，https-https或http-https，而不是https-http。这是一项安全功能，不是跨域问题。 – Hugolpz 2016-12-07 15:47:46

发现了一个可能的解决方法，我不相信有人提到。

这是问题的一个很好的说明： http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

基本上只要你使用表单/ URL编码/纯文本内容类型你的罚款。

$.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>

希望这有助于。

来源

2014-02-03 21:02:20 Rytis

我正在使用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！

来源

2016-11-23 17:27:27

XMLHttpRequest无法使用jQuery加载URL

回答

相关问题