docs: explain why headers not forwarded when using $fetch on the server (#31114)

docs/1.getting-started/6.data-fetching.md

@@ -515,9 +515,9 @@ For finer control, the `status` variable can be:
 
 When we call `$fetch` in the browser, user headers like `cookie` will be directly sent to the API.
 
-Normally, during server-side-rendering, since the `$fetch` request takes place 'internally' within the server, it wouldn't include the user's browser cookies, nor pass on cookies from the fetch response.
+Normally, during server-side-rendering, due to security considerations, the `$fetch` wouldn't include the user's browser cookies, nor pass on cookies from the fetch response.
 
-However, when calling `useFetch` on the server, Nuxt will use [`useRequestFetch`](/docs/api/composables/use-request-fetch) to proxy headers and cookies (with the exception of headers not meant to be forwarded, like `host`).
+However, when calling `useFetch` with a relative URL on the server, Nuxt will use [`useRequestFetch`](/docs/api/composables/use-request-fetch) to proxy headers and cookies (with the exception of headers not meant to be forwarded, like `host`).
 
 ### Pass Cookies From Server-side API Calls on SSR Response
 

docs/3.api/2.composables/use-request-fetch.md

@@ -11,7 +11,7 @@ links:
 You can use `useRequestFetch` to forward the request context and headers when making server-side fetch requests.
 
 When making a client-side fetch request, the browser automatically sends the necessary headers.
-However, when making a request during server-side rendering, because the request is made on the server, we need to forward the headers manually.
+However, when making a request during server-side rendering, due to security considerations, we need to forward the headers manually.
 
 ::note
 Headers that are **not meant to be forwarded** will **not be included** in the request. These headers include, for example:
@@ -26,14 +26,14 @@ The [`useFetch`](/docs/api/composables/use-fetch) composable uses `useRequestFet
 
 ```vue [pages/index.vue]
 <script setup lang="ts">
-  // This will forward the user's headers to the `/api/foo` event handler
-  // Result: { cookies: { foo: 'bar' } }
-  const requestFetch = useRequestFetch()
-  const { data: forwarded } = await useAsyncData(() => requestFetch('/api/cookies'))
-  
-  // This will NOT forward anything
-  // Result: { cookies: {} }
-  const { data: notForwarded } = await useAsyncData(() => $fetch('/api/cookies')) 
+// This will forward the user's headers to the `/api/cookies` event handler
+// Result: { cookies: { foo: 'bar' } }
+const requestFetch = useRequestFetch()
+const { data: forwarded } = await useAsyncData(() => requestFetch('/api/cookies'))
+
+// This will NOT forward anything
+// Result: { cookies: {} }
+const { data: notForwarded } = await useAsyncData(() => $fetch('/api/cookies')) 
 </script>
 ```
 

docs/3.api/3.utils/$fetch.md

@@ -18,6 +18,8 @@ During server-side rendering, calling `$fetch` to fetch your internal [API route
 Using `$fetch` in components without wrapping it with [`useAsyncData`](/docs/api/composables/use-async-data) causes fetching the data twice: initially on the server, then again on the client-side during hydration, because `$fetch` does not transfer state from the server to the client. Thus, the fetch will be executed on both sides because the client has to get the data again.
 ::
 
+## Usage
+
 We recommend to use [`useFetch`](/docs/api/composables/use-fetch) or [`useAsyncData`](/docs/api/composables/use-async-data) + `$fetch` to prevent double data fetching when fetching the component data.
 
 ```vue [app.vue]
@@ -59,3 +61,38 @@ function contactForm() {
 ::note
 If you use `$fetch` to call an (external) HTTPS URL with a self-signed certificate in development, you will need to set `NODE_TLS_REJECT_UNAUTHORIZED=0` in your environment.
 ::
+
+### Passing Headers and Cookies
+
+When we call `$fetch` in the browser, user headers like `cookie` will be directly sent to the API.
+
+However, during Server-Side Rendering, due to security risks such as **Server-Side Request Forgery (SSRF)** or **Authentication Misuse**, the `$fetch` wouldn't include the user's browser cookies, nor pass on cookies from the fetch response.
+
+::code-group
+
+```vue [pages/index.vue]
+<script setup lang="ts">
+// This will NOT forward headers or cookies during SSR
+const { data } = await useAsyncData(() => $fetch('/api/cookies'))
+</script>
+```
+
+```ts [server/api/cookies.ts]
+export default defineEventHandler((event) => {
+  const foo = getCookie(event, 'foo')
+  // ... Do something with the cookie
+})
+```
+::
+
+If you need to forward headers and cookies on the server, you must manually pass them:
+
+```vue [pages/index.vue]
+<script setup lang="ts">
+// This will forward the user's headers and cookies to `/api/cookies`
+const requestFetch = useRequestFetch()
+const { data } = await useAsyncData(() => requestFetch('/api/cookies'))
+</script>
+```
+
+However, when calling `useFetch` with a relative URL on the server, Nuxt will use [`useRequestFetch`](/docs/api/composables/use-request-fetch) to proxy headers and cookies (with the exception of headers not meant to be forwarded, like `host`).