使用 fetch 获取 json 和 ajax 会产生不同的响应

Question

我一直在使用 ajax 取回一些 json 数据，最近尝试使用 fetch 实现。我有不同的响应，我的 ajax returns 是一个包含我所有 key/value 对的字符串，而获取查询正在返回响应 objects 根本不包含我的任何 key/value 对。（我在两个示例中请求完全相同的资源并收到不同的响应）

谁能告诉我我做错了什么或为什么会这样？

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);
    }
});

控制台日志结果：（这是我希望使用获取方法获得的响应）

[{"id":1,"name":"two on two","abbreviation":"2v2","inhouse":true,"length":50,"capacity":1,"price":"50.2","salary":"15.22","url":"http://localhost:3000/en/products/1.json"},{"id":2,"name":"threesome Lessons","abbreviation":"3SUM","inhouse":false,"length":50,"capacity":3,"price":"33.33","salary":"11.11","url":"http://localhost:3000/en/products/2.json"},{"id":3,"name":"Prod1","abbreviation":"PRR1","inhouse":true,"length":22,"capacity":2,"price":"20.0","salary":"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)
    });

控制台日志结果：（响应一个 object 充满其他 object 但似乎只是一个 html 响应没有任何我请求的数据）

Response {} body: (...) bodyUsed: false headers: Headers ok: true status: 200 statusText: "OK" type: "basic" url: "http://localhost:3000/login?locale=en" proto: Response

我还在控制台中使用 fetch 方法收到一条错误消息：**

SyntaxError: Unexpected token <

**

希望有人能提供帮助。 :)

更新： 在仔细检查我的两个请求中的 header 之后，我注意到以下内容：我的 AJAX 请求也通过 CSRF 令牌发送作为 header 中的 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，因为它允许请求成为经过身份验证的请求。 :)

Answer 1

不确定，也许将 dataType: "text" 更改为 "json"?

Answer 2

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

credentials: 'same-origin'

使用 fetch 获取 json 和 ajax 会产生不同的响应

getting json with fetch and ajax yields different responses

javascript

json

fetch