Nuxt 3 useFetch中正确传递客户端Cookie请求头的方法

options.headers["Cookie"] = `${config.public.cart_session.name}=${cart_session.value.session};`

<script setup lang="ts">
import { useFetch, useRequestHeaders, useRuntimeConfig } from '#app';
import { ref } from 'vue';

// 假设 product 和 cart_session 已经在组件或组合式函数中定义
const product = { sku: 'some-sku-123' };
// cart_session.value.session 应该是一个从客户端cookie中解析出来的值
// 或者是一个在服务器端根据客户端cookie验证后生成的会话ID
const cart_session = ref({ session: 'server_derived_session_token_if_any' });
const config = useRuntimeConfig();

// 1. 获取客户端发送给Nuxt服务器的完整Cookie头
// 传入一个数组，指定你想要获取的请求头名称（小写）
const clientCookieHeader = useRequestHeaders(['cookie']);
console.log('Client Cookie Header received by Nuxt server:', clientCookieHeader.cookie);

// 2. 准备要传递给useFetch的headers

// 场景一：将客户端Cookie转发给内部API
// 对于内部API（例如 `/api/me`），通常可以直接传递整个客户端Cookie头，
// 让后端API自行处理。
const { data: internalApiData, error: internalApiError } = await useFetch('/api/me', {
    headers: clientCookieHeader, // 直接传递所有客户端cookie
    onRequest({ request, options }) {
        console.log('[Internal API Fetch Request]', options.headers);
    },
    onResponse({ request, response, options }) {
        console.log('[Internal API Fetch Response]', response._data);
    },
});

// 场景二：将客户端特定Cookie转发给外部API
// 对于外部API，出于安全和精细控制的考虑，通常建议只传递必要的会话ID或其他特定令牌。
let headersForExternalApi: Record<string, string> = {};
const specificCookieName = config.public.cart_session?.name || 'cart_session_default_name';

// 尝试从客户端Cookie头中提取我们需要的特定会话Cookie
if (clientCookieHeader.cookie) {
    const cookieString = clientCookieHeader.cookie;
    // 使用正则表达式从完整的Cookie字符串中提取特定名称的Cookie值
    const match = cookieString.match(new RegExp(`${specificCookieName}=([^;]+)`));
    if (match && match[1]) {
        headersForExternalApi['Cookie'] = `${specificCookieName}=${match[1]};`;
        console.log(`Extracted specific cookie for external API: ${specificCookieName}=${match[1]}`);
    }
}

// 如果客户端Cookie中没有找到，但 `cart_session.value.session` 存在
// （例如，它可能是一个服务器端根据其他认证信息生成的会话ID），则使用它。
if (!headersForExternalApi['Cookie'] && cart_session.value && cart_session.value.session) {
    headersForExternalApi['Cookie'] = `${specificCookieName}=${cart_session.value.session};`;
    console.log(`Using server-derived session for external API: ${specificCookieName}=${cart_session.value.session}`);
}

// 3. 使用 useFetch 发起外部请求
const { data: externalApiData, error: externalApiError } = await useFetch("https://eo761aoiqhvo0xx.m.pipedream.net", {
    query: {
        origin: "example",
        qty: "1",
        sku: product.sku
    },
    headers: headersForExternalApi, // 传递构造好的外部API所需Cookie
    onRequest({ request, options }) {
        console.log("[External API Fetch Request Headers]", options.headers);
    },
    onRequestError({ request, options, error }) {
        console.error("[External API Fetch Request Error]", error);
    },
    onResponse({ request, response, options }) {
        console.log("[External API Fetch Response]", response._data);
    },
    onResponseError({ request, response, options }) {
        console.error("[External API Fetch Response Error]", response?.status, response?._data);
    }
});

// 在这里可以处理 internalApiData, externalApiData, error 等
// 例如：
// if (internalApiError.value) {
//     console.error('Failed to fetch internal API:', internalApiError.value);
// } else {
//     console.log('Internal API Data:', internalApiData.value);
// }
// if (externalApiError.value) {
//     console.error('Failed to fetch external API:', externalApiError.value);
// } else {
//     console.log('External API Data:', externalApiData.value);
// }
</script>