Nuxt 3 SSR useFetch 重新获取数据客户端

Question

我正在使用 useFetch 实现一个简单的 SSR 站点。当 url 是硬编码字符串时，它工作得很好，但一旦我开始使用运行时配置变量（来自 .env 文件），就会在服务器上触发提取（成功），并在客户端触发 CORS 问题。可能是什么问题？

<script setup>
const route = useRoute();
const config = useRuntimeConfig();

let url = config.BASE_URL || config.public.BASE_URL + route.path;

const { data } = await useFetch(url, {
  headers: {
    fetchMode: 'headless',
  },
  server: true,
});
</script>

请注意，由于客户端的第二次获取，我必须添加配置和公共配置。

Answer 1

为了防止在客户端重新获取，您可以尝试使用“useState”

let result = useState('result');
  result.value = await useFetch(url, {
    headers: {
      fetchMode: 'headless',
    },
    server: true,
  });

来自文档：

useState is an SSR-friendly ref replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.