Question

我正在尝试构建一个简单的应用程序，以便像这样从公共api获取数据。

<template>
  <div>
    <v-card v-for="fact in facts" :key="fact._id" :id="fact._id">
      <v-card-title class="headline">
        {{fact.text}}
      </v-card-title>
    </v-card>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data(){
    return{
      facts:[]
    }
  },
  async created(){
    const config = {
      headers: {
        'Accept': 'application/json'
      }
    }

    try{
      const res = await axios.get('https://cat-fact.herokuapp.com/facts', config);
      this.facts = res.data;
    }catch (err){
      console.log(err)
    }
  }
}
</script>

当我执行console.log(this.facts)时，它将返回cli中的数据，但不会返回网站上的数据。它不会遍历所有项目。我在这里做什么错了？

Answer 1

您遇到CORS问题（服务器需要允许您的应用请求资源，但现在还没有）。您可以使用 https://cors-anywhere.herokuapp.com 来克服这一问题（不过，这不是用于生产）
您要查找的数据不在 res.data 中，而是在 res.data.all

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      facts: []
    }
  },
  async created() {

    const config = {
      headers: {
        'Accept': 'application/json'
      }
    }

    try {
      const res = await axios.get('https://cors-anywhere.herokuapp.com/https://cat-fact.herokuapp.com/facts', config);
      this.facts = res.data.all;
    } catch (err) {
      console.log(err)
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <v-card v-for="fact in facts" :key="fact._id" :id="fact._id">
            <v-card-title class="headline">
              {{fact.text}}
            </v-card-title>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

Answer 2

问题似乎出在您的第一句话：

我正在尝试构建一个简单的应用，从中我可以从公共api 获取数据

如果我尝试重现您的代码，则会在浏览器开发工具控制台中收到以下消息：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cat-fact.herokuapp.com/facts. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing) Learn More

这实际上意味着该API不太公开，因为所有者不允许从另一个JavaScript应用中调用该API。该机制称为CORS，您可以阅读有关信息，例如here

Nuxt，Vue.js + Vuetify简单请求不起作用

2 个答案: