Ich habe eine Funktion myFetch, die ein Wrapper um fetch ist, um ein Token in den Header einzufügen
import clientCookies from "js-cookie";
import {cookies} from "next/headers";
const myFetch = async (...args) => {
let token
if (typeof window === "undefined") {
// client side
token = clientCookies.get("authToken")
} else {
// server side
serverCookies = cookies()
token = serverCookies.get("authToken").value
}
args[1].headers = {"Authorization": `bearer ${token}`}
const res = await fetch(...args)
const data = await res.json()
return data
}
Aber ich erhalte eine Fehlermeldung, wenn ich diese Funktion auf der Clientseite aufrufe
You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component. Learn more: https://nextjs.org/docs/getting-started/react-essentials
Gibt es eine Möglichkeit, serverseitig „{Cookies} nur von ‚next/headers‘ zu importieren“
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您可以根据窗口对象的当前类型有条件地导入每个模块。如果未定义；导入服务器模块，如果不是客户端模块：
const myFetch = async (...args) => { let token; if (typeof window === "undefined") { const { default: clientCookies } = await import("js-cookie"); token = clientCookies.get("authToken"); } else { const { cookies: serverCookies } = await import("next/headers"); token = serverCookies().get("authToken").value; } args[1].headers = { Authorization: `bearer ${token}` }; const res = await fetch(...args); const data = await res.json(); return data; };