axios.get 不返回 JSON答案

【问题标题】：axios.get not returning JSONaxios.get 不返回 JSON
【发布时间】：2019-02-10 12:18:50
【问题描述】：

我目前正在学习 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

提前致谢。

【问题讨论】：

标签： javascript vue.js axios

【解决方案1】：

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

【讨论】：

【解决方案2】：

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 内

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

感谢您的回复。那么如果最终用户没有 CORS 插件，它就不能工作吗？您将如何从该 API 获得结果？使用和显示来自 API 的数据的最常见方式是什么？
它会起作用的。您正在从 localhost 运行您的应用程序，这就是您无法访问受 CORS 保护的服务的原因。当您将应用上线时，就没有问题了。

【解决方案5】：

查看发出的网络请求，您会发现它因混合内容标记被阻止而失败

稍微挖掘一下，这可能是因为调用是通过 http 而不是 https，不幸的是，这只能由 API 的创建者修复。结果，浏览器无法发出请求，因为它认为响应是不安全的。阅读更多here。

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

【讨论】：