How to successfully use axios without Vue.js CLI (e.g. with JS Fiddle)

Question

I'm currently in the process of learning vue.js. To understand the dependencies better I'm n ot using the Vue cli yet but JS fiddle instead. I would now like to consume an API via axios. My HTML looks as follows:

<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>

The Javascript / Vue.js-part looks as follows:

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);
        })
    }
   }
})

The button function itself get executed but I don't get into the promise-function.

Chrome developer tools throws the following error:

It would be great if you could help me f ixing the API call so that I can work with the response.

Thank you and kind regards

Georg

Answer 1

The error here is you are trying to access the endpoint using HTTP and not HTTPS

Here is a working example of your code in jsfiddle: https://jsfiddle.net/xLu1rtzo/ (I changed http with https )

Answer 2

Change http://www.reddit.com/r/pics.json to 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 3

I had to use "https" instead of "http" for the API.