Question

如果这个问题已经得到解答，我道歉。

我正在尝试从使用jQuery .ajax调用公开JSON接口的REST Web服务中检索数据。

当我使用URL调用服务时，尽管我获得了HTTP状态代码200 OK，但jQuery调用失败。

当我将响应复制到文件系统上的文件中并检索它时，同样的调用有效。

我正在访问的文件和我正在调用的Web服务都在同一台机器上。

以下代码中使用的关于网址的一些注释：

使用：

url: "http://localhost:9090/app/user/861",

呼叫失败，在所有浏览器上进入.fail。

URL本身在所有浏览器上返回json：

{
    "userid": 861,
    "employeeno": "123",
    "jobdesc": "Developer",
    "firstname": "Jasper",
    "lastname": "Fitussi"
}

在本地文件系统中使用“test.json”时，行为是：

url: "ajax/test.json",

在Firefox上，执行调用，进入.done并在页面上显示结果。

在Chrome上，通话失败，状态为404，并显示以下消息 -

“请求资源上没有'Access-Control-Allow-Origin'标头。因此不允许来源'null'。”

我尝试了更改dataType:"jsonp"的不同组合，在网址的末尾添加了?callback=?，并在没有好运的情况下将数据封装在test.json中，并带有'（'和''）'。

请理解我是UI编程，javascript和jQuery的新手。

请帮助我做错了什么。这是javascript：

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript">
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url:"ajax/test.json",    
            // the following commented call fails, goes into .fail
            // url:"http://localhost:9090/app/user/861", 
            contentType: "application/json",
            accepts: "application/json",
            dataType: "json"
        })
        .done(function(data) {
            alert("Success");
            console.log(data);
            var items = [];
            $.each( data, function( key, val ) {
                items.push( "<li id='" + key + "'>" + val + "</li>");
            });
            $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
            }).appendTo( "body" );
        })
        .fail(function(data) {
            console.log(data);
            alert("Failed");
            })
        .always(function() {
            alert("In Always");
        });
    });
</script>

以下是将url粘贴到浏览器中时的输出（也是ajax / test.json的内容）：

{
    "userid": 861,
    "employeeno": "123",
    "jobdesc": "Developer",
    "firstname": "Jasper",
    "lastname": "Fitussi"
}

Answer 1

你的问题不是关于UI编程，而是关于现代浏览器的安全模型：p

当您从与托管HTML页面的域不同的域调用Web服务（即：加载JSON文件）时，会发生Access-Control-Allow-Origin错误。在您的情况下，您将从硬盘驱动器（文件：///）打开html文件并在localhost上调用Web服务。

这是所有现代浏览器中的一项安全功能，禁止从外部Web服务获取数据，而Web服务所有者不会授权您（或允许所有人使用通配符）来调用它。

我建议您阅读MDN的以下指南，以便了解您遇到此问题的原因。这将很容易解决

https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS

如果您控制webservice的源代码或托管它的Web服务器，则需要添加Access-Control-Allow-Origin HTTP标头。

Answer 2

你是否在wamp，lamp，xampp或mamp上使用Apache进行ajax调用？我认为你直接使用一些文件可以在你的桌面上说，而不是从wamp的www文件。如果浏览器发送了正确的URL，那么后端响应很好，你的前端代码看起来很好，所以我认为chrome抱怨你不使用localhost。我对吗？您的本地开发设置是什么？

Answer 3

如果它是客户端的本地文件，请使用file:///作为URL的前缀：

url: 'file:///ajax/test.json'

/中的第三个file:///表示：

作为一种特殊情况，可以将字符串“localhost”或空串;这被解释为`URL所在的机器被解释'。 3.10

Reference here

Answer 4

下载一个名为fiddler的工具，从http://fiddler2.com/很好地调试Web请求，看看它们失败的原因。这将帮助您缩小您遇到的问题范围，我们可以为您提供进一步的帮助，因为目前它的所有猜测工作都可以。

Answer 5

我有同样的问题，在IE和FireFox中都运行良好，使用jsonp对一个休息服务进行了一次ajax调用，并且在chrome中运行良好，但是当我尝试使用jsonp加载文件时，我得到了跨域错误。简而言之，我必须在文件路径中添加“file：”到url

    $.ajax({
    type : 'GET',
    url : 'file:jsondata/rain_acc_data.json',
    dataType : 'jsonp',
    jsonpCallback : "jsoncallback",
    success : function(data) {
        aler('ok');
    },
    error : function(jqXHR, status) {
        alert("Failed to load list" + status + jqXHR);
    }
});

这对我有用，请确保用jsoncallback将你的json包装在文件中（“你的杰森在这里”）;

虽然HTTP状态为200 OK，但JQuery ajax对URL的GET请求失败

5 个答案:

Reference here