nuxt 3 和引用头，引用头返回为未定义

Question

我需要存储然后使用引用标头。我想要实现的是获取引用标头，然后将其存储在 cookie 中，我可以访问它并使用它来填充 axios 请求，进一步推动用户旅程。

我目前正在我的

app.vue

中执行以下操作

const headers = useRequestHeaders();
console.log("headers", headers['referrer']);

我设置了从

http://localhost

到

http://localhost:3000

的重定向，但是引荐来源网址未定义，我如何才能成为我的用户的引荐来源网址。

Answer 1

由于 nuxt 在客户端和服务器端都运行，因此您应该在插件中获取

referrer

标头而不是

app.vue

，然后将值存储到 pinia 存储中，之后，您可以在您的任何地方使用它nuxt项目。

---

首先创建一个新插件

// plugin/initial.ts
// any name you want but without the `.client.[js|ts]` or `.server.[js|ts]` tail
// which will let the code run in client side or server side only

export default defineNuxtPlugin(async (nuxtApp) => {

    const referrer = useRequestHeaders('referrer');

    const referrerStore = useReferrerStore(nuxtApp.$pinia as Pinia);
    referrerStore.setReferrer(referrer);
});

然后添加pinia商店

// store/referrer.ts

import { defineStore } from 'pinia';

export const useReferrerStore = defineStore('referrer', {
    state: () => ({
        _referrer: {}
    }),
    getters: {
        referrer: (state) => stats._referrer
    },
    actions: {
        setReferrer (value: string | undefined | null) {
            this._referrer = value;
        }
    }
});

---

现在您可以在 nuxt 项目中的任何地方使用它。

useFetch(
    '/my/api',
    {
        headers: {
            referrer: useReferrerStore().referrer
        }
    }
);

---

我设置了从 http://localhost 到 http://localhost:3000 的重定向，但是引荐来源网址未定义，我如何才能成为我的用户的引荐来源网址。

由于您将用户从

http://localhost

重定向到

http://localhost:3000

， 您可能需要为 nginx 添加一些配置来设置

Referer

标头。

server {
    listen 80;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header Referer $http_referer;
    }
}