CODEWITHSUNDEEP
javascriptvue.jsaxios
axiosquestion
axiosquestion

Reputation: 3

axios.get not returning JSON

I'm learning the Vue.js framwork at the moment. More specific, Using Axios to Consume APIs.

I have this code:

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

The axios.get('https://api.coindesk.com... line is working correctly. Unfortunately, the second (commented) line is not.

Is there someone who can tell me why there's no response with the commented line?

Code: https://codepen.io/anon/pen/zJdvzW

Thanks in advance.

Upvotes: 0

Views: 3295

Answers (5)

Jack Scott
Jack Scott

Reputation: 68

Looking at the network request being made you see it fails due to a blocked mixed-content flag screenshot of network request

A little digging suggest this may be due to the fact that the call is via http rather than https which unfortunately can only be fixed by the creator of the API. As a result the browser is failing to make the request as it's seeing the response as insecure. Read more here.

This doesn't really answer the question unfortunately, if the request was made from a backend it may not be so sensitive to the mixed-content but within the browser you may struggle to get results from this API. (For instance calling from postman the api response is passed with no issue)

Upvotes: 0

Ikbel
Ikbel

Reputation: 7851

The response data can be retrieved from response.data.

api.coindesk.com doesn't have a CORS issue because it already includes Access-Control-Allow-Origin: * header.

change your code to:

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

Upvotes: 1

dziraf
dziraf

Reputation: 3653

Codepen uses https but you are trying to access resource on a website that uses http, as you can see in console:

spread.js:25 Mixed Content: The page at 'https://codepen.io/anon/pen/OojyYR' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://calapi.inadiutorium.cz/api/v0/en/calendars/general-en.json'. This request has been blocked; the content must be served over HTTPS.

If you use jsfiddle instead of codepen it will work: http://jsfiddle.net/eywraw8t/335825/

Also, your requested resource is inside of response.data

Upvotes: 0

Lazar Nikolic
Lazar Nikolic

Reputation: 4404

It is because of the cors. You can install Google Chrome plugin called CORS and enable it. This will allow your axios call to work.

Upvotes: 0

Cloud_Ratha
Cloud_Ratha

Reputation: 618

Seems like http://calapi.inadiutorium.cz/api/v0/en/calendars/general-en.json doesn't support CORS.

Upvotes: 0

Related Questions