d3.json为什么不随请求发送cookie？

Question

I'm new to doing ajax requests with the built-in methods in d3.js (v5). Here's my code:

d3.json(uri).then(data =>console.log(data));

I tried this in an app that uses cookie authentication, and kept getting 401 status codes. Using the chrome dev tools revealed that it's sending the request without any cookies at all.

That's weird because ajax requests in native javascript send cookies along with every request by default. Here's an example of an ajax request in native javascript:

function nativeAjax(uri, callback) {
    let request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            callback(request);
        }
    }
    request.open('get', uri, true);
    request.send(null);
}
nativeAjax(uri, request => console.log(request.status));

Plugging this into my app, chrome dev tools shows it does send the authentication cookie along with the request and indeed the request.status comes back as 200 showing that it is indeed authenticated.

My questions are:

1. how can I configure d3.json to send the required cookie?
2. how do I catch the response by status? I'm going to want to do something different for 401 response than 403 response, for example.
3. Where can I read a more complete documentation or examples for how to do use d3.json? I've always done native ajax because I don't use jquery, but if it's part of the library I'm using anyway, I'd like to learn how to use it. But the documentation says almost nothing about it, and the page it links to isn't helpful either. And most tutorials were for previous versions of d3 and don't work anymore.

Answer 1

Version 5 switched to use the Fetch API, which doesn't send any cookies by default. You can overcome this by adding options for d3.json to pass through to fetch:

d3.json(uri, {credentials: "same-origin"}).then(...);

Or, for cross-origin requests:

d3.json(uri, {credentials: "include"}).then(...);

If a 4XX status (or 5XX) is returned D3 will cause the promise to reject, which you can handle by providing a second callback function to then . I welcome corrections, but I believe there is no way within this function to get the actual status code.

The only mention of the change to Fetch and promises I found in the documentation (at the time of writing) was in the changelog: D3 v5 Changes .