阻止nuxt为nuxt SSR Web应用执行客户端代码

时间:2019-08-08 12:05:28

标签: vue.js cors vue-router nuxt

我已经使用create-nuxt-app创建了一个SSR / progressive nuxt项目。

我有两个页面,每个页面都向我管理的后端API发出HTTP请求。这个HTTP请求是通过我的nuxt页面的async asyncData(ctx)方法执行的。

当我直接访问任何这些页面或重新加载这些页面时,这些HTTP请求都可以正常工作。但是,当我单击<nuxt-link :to=" / mypage " />或在浏览器中单击“后退”按钮时:

  1. 突然将“ Origin”标头添加到我的HTTP请求中。我想这是浏览器执行此操作的原因,因为我的HTTP请求是通过客户端JavaScript而不是nuxt的节点服务器发出的,对吧?

  2. 已执行HTTP请求,但是在请求可以发送响应之前,将立即加载新页面。显示控制台错误:Access to XMLHttpRequest at 'http://localhost.myapi/foobar' from origin 'http://localhost.mynuxtapp' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.之所以如此,是因为我在API上设置了一个断点,并且它甚至没有机会在响应中使用此适当的标头进行响应。

  3. 由于上述错误消息,单击此<nuxt-link />或返回浏览器后,页面显示nuxt“网络错误”消息。

所以我的问题是:

nuxt的asyncData方法(https://nuxtjs.org/guide/async-data)似乎执行客户端代码执行。有没有其他方法可以防止这种情况发生?

1 个答案:

答案 0 :(得分:0)

只需在您的asyncData方法中添加if (process.server) {},如下所示,即可仅在服务器端执行代码。