HTML/JS/JQuery/AJAX работает в Atom html-previewer, но не в браузере

Я работаю над проектом html/js, который извлекает объекты JSON из API https://quotesondesign.com/the-api/. Следующий код отлично работает, когда я использую Atom html-previewer, однако, когда я пытаюсь открыть его с помощью Firefox или Chrome, JS не работает должным образом. Ни цитата, ни автор не восстанавливаются. Это часть проекта FreeCodeCamp.

Вот код JS, CSS и HTML:

$(document).ready(function() {
  let quote;
  let author;

  getQuote();

  function getQuote() {
    $.ajaxSetup({ cache: false });
    $.ajax({
      type: 'GET',
      url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function(data){
        quote = data[0].content;
        author = data[0].title;
        $("#text").html(quote);
        $("#author").html('-' + author);
      }
    });
    /*$.ajaxSetup({ cache: false });
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(a) {
  quote = a[0].content;
  author = a[0].title;
  $("#text").html(quote);
  $("#author").html('-' + author);
});*/
  };
  $("#new-quote").on("click", function(){
    getQuote();
  });
  $("#tweet-quote").on("click", function() {
    window.open("twitter.com/intent/tweet?text = " + quote + " -" + author);

  });

});

body {
  background-color: black;
  color: white;
}
#quote-box {
  border: 2px solid white;
  padding: 20px;
  color: white;
  max-width: 500px;
  height: auto;
  margin: auto;
}
button {
  margin: 20px;
  border-radius: 5%;
  border: 2px solid white;
  background-color: black;
  color: white;

}

span {
  width: auto;
  height: auto;
}

<html>
  <head>
    <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
    <link rel = "stylesheet" href = "qm.css">

    <script src = "http://code.jquery.com/jquery-1.9.1.min.js">
    </script>
  <script src = "file:///Users/RoseSamuel/Desktop/QuoteMachine/qm.js" type = "text/javascript"></script>

  </head>
<body>
  <script src = "https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  <h1 class = "text-center">Quote Machine</h1>
  <div id = "quote-box" class = "text-center">
    <span id = "text"></span> <br>
    <span id  = "author"></span> <br>
    <button id = "new-quote" >New Quote</button>
    <button id = "tweet-quote">Tweet Quote</button>
  </div>

</body>
</html>

Ошибка CORS в консоли браузера?

— 21.02.2019 23:16

Это верно. Я только что посмотрел на консоль Chrome JS и увидел это: блокировка чтения из разных источников (CORB) заблокировала ответ из разных источников quotesondesign.com/wp-json/… с типом MIME application/json. Дополнительные сведения см. в статье chromestatus.com/feature/5629709824032768. отправить @ jquery-1.9.1.min.js:5 ajax @ jquery-1.9.1.min.js:5 getQuote @ qm.js:9 (анонимно) @ qm.js:29 отправить @ jquery-1.9.1. мин.js:3 v.handle @ jquery-1.9.1.min.js:3

— 21.02.2019 23:49

Эта страница кратко упоминает проблему CORS ("независимое происхождение") с некоторыми предложениями.

— 22.02.2019 18:31

javascript jquery ajax

21.02.2019 23:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

204

Другие вопросы по теме

Нажмите, чтобы прокрутить элементы внутри прокручиваемого div, который не работает

Как перейти к следующему элементу карусели по нажатию кнопки внутри элемента карусели

Как показать только N первых строк в DataTables? Как после этого скачать все данные?

Как изменить div в текстовой области?

Как запретить <input type="submit"> отправлять мою форму до тех пор, пока не будут выполнены критерии?

Измените ul для выбора при переходе с рабочего стола на мобильный

Код Jquery делает всю предыдущую подсветку синтаксиса PHP неисправной [Sublime Text 3]

Нужно поймать и проанализировать ответ json с помощью flash-приложения в браузере

Вставить калькулятор внутрь jQuery .on() «добавить»

Как узнать, когда элемент <input> был отменен, используя jQuery

HTML/JS/JQuery/AJAX работает в Atom html-previewer, но не в браузере

Другие вопросы по теме

Похожие вопросы