Issue with API Caching Despite Correct vercel.json and Header Configurations
Hello Vercel Community,
I am facing a challenge with caching on an API endpoint in my Nuxt application, despite having set both server and client-side headers to prevent caching. The issue persists exclusively when deployed to Vercel, whereas it behaves as expected locally.
Client-Side Fetch Request:
<script setup lang="ts">
import { ref } from 'vue';
interface EchoResponse {
text: string;
}
const sendToServer = async () => {
try {
const { data, error, pending } = await useFetch<EchoResponse>('/api/echo', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache, no-store, must-revalidate',
'Pragma': 'no-cache',
'Expires': '0',
},
cache: 'no-cache',
body: JSON.stringify({ text: inputText.value }),
});
if (data.value) {
responseText.value = data.value.text;
}
}
};
</script>
Server-Side Code (API Endpoint):
export default defineEventHandler(async (event) => {
const requestBody = await readBody(event);
const responseText =
// Set headers to prevent caching
setResponseHeader(event, "Cache-Control", "no-cache, no-store, must-revalidate");
setResponseHeader(event, "Pragma", "no-cache");
setResponseHeader(event, "Expires", "0");
return { text: responseText };
});
vercel.json Configuration:
{
"headers": [
{
"source": "/api/example",
"headers": [
{ "key": "Cache-Control", "value": "no-cache, no-store, must-revalidate" }
]
}
]
}
Despite these configurations, subsequent requests to the API endpoint seem to return cached responses when deployed on Vercel. The response headers are as expected, and local testing shows no such caching behavior.
I would greatly appreciate any insights or suggestions on how to resolve this caching issue or any additional configurations I might consider to ensure that the API responses are not cached.
Thank you for your time and help!
I am facing a challenge with caching on an API endpoint in my Nuxt application, despite having set both server and client-side headers to prevent caching. The issue persists exclusively when deployed to Vercel, whereas it behaves as expected locally.
Client-Side Fetch Request:
<script setup lang="ts">
import { ref } from 'vue';
interface EchoResponse {
text: string;
}
const sendToServer = async () => {
try {
const { data, error, pending } = await useFetch<EchoResponse>('/api/echo', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache, no-store, must-revalidate',
'Pragma': 'no-cache',
'Expires': '0',
},
cache: 'no-cache',
body: JSON.stringify({ text: inputText.value }),
});
if (data.value) {
responseText.value = data.value.text;
}
}
};
</script>
Server-Side Code (API Endpoint):
export default defineEventHandler(async (event) => {
const requestBody = await readBody(event);
const responseText =
${requestBody.text} test// Set headers to prevent caching
setResponseHeader(event, "Cache-Control", "no-cache, no-store, must-revalidate");
setResponseHeader(event, "Pragma", "no-cache");
setResponseHeader(event, "Expires", "0");
return { text: responseText };
});
vercel.json Configuration:
{
"headers": [
{
"source": "/api/example",
"headers": [
{ "key": "Cache-Control", "value": "no-cache, no-store, must-revalidate" }
]
}
]
}
Despite these configurations, subsequent requests to the API endpoint seem to return cached responses when deployed on Vercel. The response headers are as expected, and local testing shows no such caching behavior.
I would greatly appreciate any insights or suggestions on how to resolve this caching issue or any additional configurations I might consider to ensure that the API responses are not cached.
Thank you for your time and help!
