axios.get не возвращает JSON

Question

Я сейчас изучаю фреймворк Vue.js. Более конкретно, Использование Axios для использования API.

У меня есть этот код:

var app = new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      //.get('http://calapi.inadiutorium.cz/api/v0/en/calendars/general-en.json')
      .then(response => (this.info = response))
  }
})

Строка axios.get('https://api.coindesk.com... работает правильно. К сожалению, второй (закомментированной) строки нет.

Есть кто-то, кто может сказать мне, почему нет ответа с закомментированной строкой?

Код: https://codepen.io/anon/pen/zJdvzW

Заранее спасибо.

Answer 1

При просмотре сетевого запроса вы видите, что он не работает из-за заблокированного флага смешанного содержимого

Небольшое копание предполагает, что это может быть связано с тем, что вызов осуществляется через http, а не через https, что, к сожалению, может быть исправлено только создателем API. В результате браузер не может выполнить запрос, так как видит ответ небезопасным. Подробнее здесь .

К сожалению, на самом деле это не отвечает на вопрос: если запрос был сделан из бэкэнда, он может быть не так чувствителен к смешанному контенту, но в браузере вам может быть сложно получить результаты из этого API. (Например, звонок от почтальона, ответ API передается без проблем)

Answer 2

Данные ответа могут быть получены из response.data.

api.coindesk.com не имеет проблемы с CORS, поскольку она уже содержит заголовок Access-Control-Allow-Origin: *.

измените свой код на:

axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response.data))

Answer 3

Это из-за cors. Вы можете установить плагин Google Chrome под названием CORS и включить его. Это позволит вашему вызову axios работать.

Answer 4

Codepen использует https, но вы пытаетесь получить доступ к ресурсу на веб-сайте, который использует http, как вы можете видеть в консоли:

spread.js: 25 Смешанное содержимое: страница на 'https://codepen.io/anon/pen/OojyYR' был загружен через HTTPS, но запросил небезопасную конечную точку XMLHttpRequest «http://calapi.inadiutorium.cz/api/v0/en/calendars/general-en.json'. Этот запрос был заблокирован; содержимое должно быть передано по протоколу HTTPS.

Если вы используете jsfiddle вместо codepen, он будет работать: http://jsfiddle.net/eywraw8t/335825/

Кроме того, ваш запрошенный ресурс находится внутри response.data

Answer 5

Похоже, http://calapi.inadiutorium.cz/api/v0/en/calendars/general-en.json не поддерживает CORS.