在NUXT中单击<nuxt-link/>时出现网络错误？

Question

单击<nuxt-link/>时出现网络错误，

这是我的错误详细信息，但是当我刷新链接时，一切正常吗？为什么？

​

​

这是我的全部代码..。

    <template>
      <div>
        <nuxt-child/>
        <h1>Videos</h1>
        <div v-for="video in $store.state.videos" :key="video.id">
          <nuxt-link :to="`/videos/${video.id}`">{{ video.customerName }}</nuxt-link>
    
        </div>
      </div>
    </template>
    
    <script>
      export default {
        head:{
            title: 'Customer List'
          },
        async fetch({$axios, store}) {
    
            let response = await $axios.get('/customers');
            let videos = response.data;
    
            store.commit('SET_VIDEOS', videos);
        },
      }
    </script>
    
    <style lang="scss" scoped>
    
    </style>````

Answer 1

您的接口请求是跨域的，因为localhost:3000和localhost:8000不同

您的接口需要使用Access-Control-Allow-Origin: *头部来响应/api/customers上的请求。这使得可以从任何源页面调用API。理想情况下，将来您会希望用实际的源替换这个“通配符”*，但对于测试来说，这是很好的。

我假设您的API是Express API，在这种情况下，将此添加到您的应用程序将强制所有请求使用通配符CORS：

// Set middlware
app.use(function (req, res, next) {

    // URL of website to allow or a wildcard
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Continue to next layer of request/middleware
    next();
}); 

或者，也可以将原点设置为http://localhost:8000

顺便说一句，在您的示例代码中，我看到您正在使用Vuex存储，并且在提交到存储之前有一个进行API调用的方法。

如果您曾经计划在另一个组件上重复此API调用，建议将您的函数转换为Vuex存储中的操作，以便它位于一个集中的、可重用的位置。