通过fetch和ajax获取json会产生不同的响应

Question

我一直在使用ajax取回一些json数据，最近尝试使用fetch实现。 我有不同的响应，我的ajax返回一个包含所有键/值对的字符串，而fetch查询返回的响应对象完全不包含任何键/值< / em>对。 （我在两个示例中请求完全相同的资源并接收不同的响应）

有人能让我知道我做错了什么或为什么会这样？

ajax请求：

$.ajax({
    url: "/" + name + ".json",
    dataType: "text",
    success: function (data) {
        console.log(data);
        var json = $.parseJSON(data);
        var itemArray = [];
        $.each(json, function() {
                itemArray.push( { value: this.id, label: this.name } );
        });
        //Populate the List
        populateListBox(name, itemArray);
    }
});

控制台日志结果:(这是我希望使用fetch方法获得的响应）

  

[{“id”：1，“name”：“two on two”，“缩写”：“2v2”，“inhouse”：true，“length”：50，“capacity”：1，“price” ：“50.2”，“salary”：“15.22”，“url”：“http://localhost:3000/en/products/1.json”}，{“id”：2，“name”：“三人课程”，“缩写”：“3SUM”， “点播”：假， “长度”：50， “容量”：3 “价格”： “33.33”， “工资”： “11.11”， “URL”： “http://localhost:3000/en/products/2.json”}，{“编码“：3”，名称 “：” PROD1" ， “缩写”： “PRR1”， “点播服务”：真， “长度”：22， “容量”：2 “价格”： “20.0”， “工资”： “20.0”， “URL”： “http://localhost:3000/en/products/3.json”}]

获取请求：

fetch("/" + name + ".json")
    .then(function(response) {
        console.log(response);
        return response.json()
    }).then(function(json) {
        var itemArray = populateItemArray(this, json);
        populateListBox(name, itemArray);
    }).catch(function(ex) {
        console.log('parsing failed', ex)
    });

控制台日志结果:(响应一个充满其他对象的对象，但似乎只是一个没有任何我请求的数据的HTML响应）

  

回复{}   身体： （...）   bodyUsed：false   标题：标题   好的：是的   状态：200   statusText：“确定”   类型：“基本”   网址：“http://localhost:3000/login?locale=en”    proto ：回复

我也在控制台中使用fetch方法收到错误，该方法声明如下：**

  

SyntaxError：意外的标记＆lt;

**

希望有人可以提供帮助。 ：）

更新：在两个请求中仔细检查我的标头后，我注意到以下内容：我的AJAX请求通过CSRF令牌以及标头中的cookie发送。 所有获取请求都是匿名和未经身份验证的（默认情况下）

所需要的只是为获取请求添加一个选项，如下所示：

fetch("/" + name + ".json", **{ credentials: 'same-origin' }**)
        .then(function(response) {
            return response.json()
        }).then(function(json) {
            var itemArray = populateItemArray(json);
            itemArray = sortByLabel(itemArray, 'label');
            populateListBox(name, itemArray);
        }).catch(function(ex) {
            console.log('parsing failed', ex)
        });

问题解决了！花了我足够长的时间 - 不需要CSRF令牌，但肯定需要cookie，因为这是允许请求成为经过身份验证的cookie。 ：）

Answer 1

fetch需要一个参数来验证其请求：

  

凭据：'同源'

Answer 2

不确定，可能会将dataType：“text”更改为“json”？