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://calapi.inadiutorium.cz/api/v0/en/calendars/general-en.json不支持CORS。

Answer 2

是因为有心跳。您可以安装名为CORS的Google Chrome插件并启用它。这将使您的axios呼叫正常工作。

Answer 3

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 4

可以从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 5

查看正在发出的网络请求，您会发现由于混合内容标志被阻止而失败 Google

稍加说明，这可能是由于该调用是通过http而不是https进行的，不幸的是，该调用只能由API的创建者修复。结果，浏览器由于认为响应不安全而无法发出请求。了解更多。

不幸的是，这并不能真正回答问题，如果请求是从后端发出的，则可能对混合内容不太敏感，但是在浏览器中，您可能很难从该API获得结果。 （例如，从邮递员那里调用时，API响应没有问题通过）