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

问题描述 投票:0回答:2

我正在尝试构建一个简单的应用程序,以便像这样从公共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中的数据,但不在网站上。它不会遍历所有项目。我在这里错了吗?

vue.js axios vuetify.js nuxt
2个回答
0
投票
  1. 您遇到CORS问题(服务器需要允许您的应用请求资源,但现在还没有)。您可以使用

    [https://cors-anywhere.herokuapp.com


0
投票
© www.soinside.com 2019 - 2024. All rights reserved.