Загрузка JSON работает с XMLHttpRequest, но не с jQuery

Question

Я пытаюсь получить содержимое файла JSON из своего хранилища Google. Я могу заставить его работать с XMLHttpRequest, но не с jquery, и я не знаю почему.

Это работает:

    var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        console.log(this);
    }
};
xhttp.open("GET", fileUrl, true);
xhttp.send();

Но этого не происходит:

$.getJSON(fileUrl, function(data) {
  console.log( "success", data);
});

Файл хранится в моем хранилище Google https://storage.googleapis.com/ Я установил cors, чтобы разрешить любое происхождение (с использованием подстановочного знака *) с помощью gsutil.

Только с jquery Я получаю

Access to XMLHttpRequest at 'https://storage.googleapis.com/...' from origin 'http://localhost:1234' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Как мне заставить это работать с jquery? Поскольку я считаю решение XMLHttpRequest очень уродливым.

Answer 1

Вы пробовали fetch()? Я знаю, что это не jQuery, но выглядит намного лучше, чем XMLHttpRequest:

// with async-await:
(async function() {
  const response1 = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  const json1 = await response1.json()
  console.log('Async-await:', json1)
})();

// with Promise:
const response2 = fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json2 => console.log('Promise:', json2));