Как успешно использовать топор ios без Vue. js CLI (например, с JS Fiddle)

Question

Я сейчас нахожусь в процессе обучения vue. js. Чтобы лучше понять зависимости, я не использую Vue cli , но вместо этого JS скрипку. Теперь я хотел бы использовать API через ax ios. Моя HTML выглядит следующим образом:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
<form v-on:submit.prevent>
   <input type="text" v-model="input">
   <button @click="invoke">Please click here</button>
</form>
<p>{{result}}</p>
</div>

* Javascript / Vue. js -часть выглядит следующим образом:

new Vue({
    el:"#app",
   data:{
    input: null,
      result: null,
   },
   methods: {
      invoke(){
         console.log("in function 'invoke'")
         axios.get("http://www.reddit.com/r/pics.json").then( function(response){
            console.log("in response-function")
            console.log(response.data);
        })
    }
   }
})

Сама функция кнопки выполняется но я не вхожу в функцию обещания.

Chrome Инструменты разработчика выдают следующую ошибку:

Было бы здорово, если бы вы могли помогите мне добавить вызов API , чтобы я мог работать с ответом.

Спасибо и всего наилучшего

Георг

Answer 1

Изменить http://www.reddit.com/r/pics.json на https://www.reddit.com/r/pics.json

new Vue({
    el:"#app",
   data:{
    input: null,
      result: null,
   },
   methods: {
      invoke(){
         console.log("in function 'invoke'")
         axios.get("https://www.reddit.com/r/pics.json").then( function(response){
            console.log("in response-function")
            console.log(response.data);
        })
    }
   }
})

Answer 2

Мне пришлось использовать «https» вместо «http» для API.

Answer 3

Ошибка здесь в том, что вы пытаетесь получить доступ к конечной точке, используя HTTP, а не HTTPS

Вот рабочий пример вашего кода в jsfiddle: https://jsfiddle.net/xLu1rtzo/ (я изменил http с https)