【问题标题】:JQuery ajax GET request to URL fails although HTTP status is 200 OK尽管 HTTP 状态为 200 OK,但对 URL 的 JQuery ajax GET 请求失败
【发布时间】:2014-03-27 08:08:17
【问题描述】:

如果这个问题已经得到解答,我深表歉意。

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

当我使用 URL 调用服务时,虽然我得到 HTTP 状态代码 200 OK,但 jQuery 调用失败。

当我将响应复制到文件系统上的文件中并检索它时,同样的调用会起作用。

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

关于以下代码中使用的 url 的一些说明:

使用:

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",在 URL 的末尾添加了?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"
}

【问题讨论】:

  • 我想你会发现你在某个地方有一个奇怪的 url。几乎每个现代浏览器都对来自站点当前托管的其他来源(url 域)的ajaxing 实施限制。尝试将您的网址更改为"/test.json",我认为这有更好的工作机会。否则请仔细检查您的网址。
  • 另外,请确保您从服务页面发出请求,该请求以 http:// 开头,而不是以 file:// 开头的内容
  • 我尝试将文件移动到文件夹中,并尝试使用在本地主机上运行的 tomcat 提供的页面,但行为与上述相同。我的目标是从服务页面检索数据 - 这不适用于任何浏览器。那么localhost不是同一个域吗?
  • 本地主机是否与 ajax 请求和它源自的文档相同的域?
  • 请清楚地引用您面临的问题数量,好像您指定了 404 以及 200 失败!

标签: javascript ajax json jquery


【解决方案1】:

您的问题不在于 UI 编程,而在于现代浏览器的安全模型:p

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

这是所有现代浏览器中的一项安全功能,禁止在未经 Web 服务所有者授权(或所有人,允许使用通配符)调用的情况下从外部 Web 服务获取数据。

我建议您阅读 MDN 的以下指南,以便您了解为什么会遇到此问题。 然后就很容易解决了

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

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

【讨论】:

  • 我现在终于理解了问题和解决方案,并且能够更好地理解安全模型。以下资源帮助我解决了这个问题。 vivin.net/2011/07/01/implementing-jsonp-in-spring-mvc-3-0-x
  • 好!请记住,JSONP 是跨域查询的(非常)方便的解决方法,但有些限制。没有错误处理客户端,没有 POST/PUT/DELETE 等...从长远来看,我建议改用 Allow-Origin 标头
【解决方案2】:

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

【讨论】:

  • webservice 是使用 java (spring) 在本地机器(我的 PC)上运行在 Tomcat 上开发的。我无法使用 jquery ajax 调用从此 Web 服务中检索数据。我可以直接从浏览器或浏览器上的 REST 客户端点击 URL,并毫无问题地获得 json 响应。
  • 您可以使用开发工具检查请求 URL、请求标头 => 接受和响应标头 => Content-Type 如果它们是 application/json 和 Request => Host 如果它是 127.0 .0.1 或本地主机。
【解决方案3】:

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

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

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

作为特殊情况,可以是字符串“localhost”或空 细绳;这被解释为 `URL 所在的机器 被解释”。 3.10

Reference here

【讨论】:

  • 嗨,更改 URL 以包含 file:/// 并没有改变我在原始问题中提到的行为。我仍然在 Chrome 上遇到“No 'Access-Control-Allow-Origin' header ...”错误,在 Firefox 上成功执行。
【解决方案4】:

http://fiddler2.com/ 下载一个名为 fiddler 的工具,这是调试 Web 请求并查看它们失败原因的好方法。 这将帮助您缩小遇到的问题范围,我们可以进一步帮助您,因为目前这一切都是猜测工作。

【讨论】:

    【解决方案5】:

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

        $.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("your jason here"); 将您的 json 包装在文件中;

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-12-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-01-17
      • 1970-01-01
      • 2017-07-16
      相关资源
      最近更新 更多