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

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 2

好像http://calapi.inadiutorium.cz/api/v0/en/calendars/general-en.json不支持CORS。

Answer 3

这是因为科尔。您可以安装名为CORS的Google Chrome插件并启用它。这将允许您的axios呼叫工作。

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

查看正在进行的网络请求，您会看到由于阻止的混合内容标志而失败

稍微挖掘表明这可能是因为呼叫是通过http而不是https，遗憾的是，这只能由API的创建者修复。因此，浏览器无法发出请求，因为它看到响应不安全。阅读更多here。

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