Consider headers in useFetch key

[hendrikheil]

Describe the feature

We are using Laravel Precognition feature to validate forms server-side before we actually submit them.

By default we use useFetch, and simply add the header required by this feature to perform the validation instead of the actual request.
Since useFetch deduplicates identical requests by default, our validation request is actually the request that gets cached. This means that when we actually want to make the request, we just get our cached response back instantly, which does not actually do anything.

We traced this down to this line

nuxt/packages/nuxt/src/app/composables/fetch.ts

Line 88 in 876fa7f

const _key = opts.key || hash([autoKey, unref(opts.method as MaybeRef<string | undefined> | undefined)?.toUpperCase() || 'GET', unref(opts.baseURL), typeof _request.value === 'string' ? _request.value : '', unref(opts.params || opts.query)])

Since we don't actually change the body, url, or params, the cache is hit.

I think it would be sensible to also include the headers in the caching key.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[danielroe]

I think this is reasonable 👍

[c-schwan]

I think this is reasonable 👍

I reported that issue a Long time ago with bearer Token in Header Hits the cache

[sisou]

Ha! This now triggers cache-misses when setting headers with useRequestHeaders, which only populates the headers on server-side, but not client-side: #23900

[ahoiroman]

Broke my little $larafetch util, as I now get multiple XSRF-cookies back as reported in #23900