防止 nuxt 为 nuxt SSR webapp 执行客户端代码

Question

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

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

当我直接访问这些页面或重新加载这些页面时，这些 HTTP 请求工作正常。然而，当我点击<nuxt-link :to="/mypage" /> 或点击浏览器上的后退按钮时：

1. 突然在我的 HTTP 请求中添加了一个“Origin”标头。我猜这是浏览器这样做，因为我的 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) 执行客户端代码执行。有没有其他方法可以防止这种情况发生？

Answer 1

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