Не удается получить данные JSON из файла с URL-адреса локального домена (статический файл Django)

Question

Я хочу загрузить данные из файла JSON для использования с d3.js

Я использую Django, и URL-адрес файла JSON json_path выглядит следующим образом: /staticfile/example.json. Я использую следующий код для чтения данных и выполнения действий:

d3.json(json_path, function(error, data){
    // Do stuff with data
}

Все работает нормально, если я использую локальный IP-адрес сервера в браузере: 192.168.x.x.

Однако, когда я использую локальный домен foo.com, который указывает на 192.168.x.x, я больше не могу загрузить данные из d3.json(). data равно нулю и не могу понять содержание error.

Мне не хватает чего-то очевидного, вероятно, связанного с обратными вызовами или чего-то еще, но у меня проблемы с пониманием общей картины. Весь сервер Django отлично работает как с 192.168.x.x, так и с foo.com, и все локально. Есть идеи?

error - это:

XMLHttpRequest​mozAnon: false
mozSystem: false
​onabort: null
​onerror: function respond()​
onload: function respond()​
onloadend: null
​onloadstart: null
onprogress: function onprogress()​
onreadystatechange: null​
ontimeout: null​
readyState: 4
​response: ""​
responseText: ""
​responseType: ""​
responseURL: ""
​responseXML: null
​status: 0
statusText: ""
​timeout: 0​
upload: XMLHttpRequestUpload { onloadstart: null, onprogress: null, onabort: null, … }​
withCredentials: false​
<prototype>: XMLHttpRequestPrototype { open: open(), setRequestHeader: setRequestHeader(), send: send(), … } page:472:7

Я использую библиотеку, которая использует версию D3 3.5.2 и не может обновляться в данном конкретном случае.

Answer 1

В общем, D3 не имеет приоритета действительно надежной поддержки AJAX так, как это делают jQuery и другие библиотеки, потому что это не в его фокусе - поэтому, если вы хотите загрузить широкий спектр внешних ресурсов, таких как данные json, вам, вероятно, следует сделать то же самое с сторонней библиотекой, которая имеет больше поддержки для тщательно настроенных вызовов AJAX.

Или просто используя XMLHttpRequest, заключенный в функцию makeRequest:

function makeRequest(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", json_path, true);
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.onreadyStatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(JSON.parse(xhr.response));
        }
    };
    xhr.onerror = function(error) {
        throw error;
    }
    xhr.send(); 
};

makeRequest(json_path, function(json_response) {
    //here you can use D3 to load your json as you want
    console.log(json_response);
});