Vuejs2 触发nuxt链接初学者时出现网络错误

刷新同一页面后触发nuxt链接时出现网络错误其工作正常
这是模板

<div class="col-lg-3" v-for="(video, index) in videos" :key="index">
       <nuxt-link :to="/video/ + video.id"> 
        <img :src="video.image" width="100%">
        <div class="card">
          
          <div class="card-body">
            <h1 class="title">{{ video.title }}</h1>
          </div>
         
        </div>
      </nuxt-link>
      </div>

下面是下一页的链接

<script>
    import axios from 'axios'
    export default{
        layout: 'default',
        asyncData({ req, params }) {
            // We can return a Promise instead of calling the callback
            return axios.get(`http://localhost:8000/video/${params.id}`)
           
              .then((res) => {
                return { video: res.data.video , relatedVideos: res.data.relatedVideos }
              })
          },
        
         
          
    }
</script>

从“axios”导入axios
导出默认值{
布局：“默认”，
asyncData（{req，params}）{
//我们可以返回一个承诺，而不是调用回调
返回axios.get(`http://localhost:8000/video/${params.id}`）
。然后（（res）=>{
返回{video:res.data.video，relatedVideos:res.data.relatedVideos}
})
},
}

这就是我们现在面临的错误

---

刷新页面后，它工作正常

安装后>my laravel后端中的软件包一切正常

检查控制台是否存在错误从源“”访问“”处的XMLHttpRequest已被CORS策略阻止：请求的资源上不存在“Access Control Allow origin”标头。因此，您有一个错误，即CORS错误。google和SOPlease上有数以百万计的关于it的文章详细阐述了它的作用。如果链接停止工作，只有链接的答案可能会变得无用。我已将此软件包添加到我的laravel应用程序中，我将其用作后端。此软件包帮助我添加cors标头

<script>
    import axios from 'axios'
    export default{
        layout: 'default',
        asyncData({ req, params }) {
            // We can return a Promise instead of calling the callback
            return axios.get(`http://localhost:8000/video/${params.id}`)
           
              .then((res) => {
                return { video: res.data.video , relatedVideos: res.data.relatedVideos }
              })
          },
        
         
          
    }
</script>