finn
AAlokai
•Created by finn on 4/11/2024 in #🙋｜general-help
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 =
${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!1 replies
AAlokai
•Created by finn on 6/27/2023 in #🙋｜general-help
Paypal wrong redirect after successful payment
1 replies
AAlokai
•Created by finn on 5/6/2023 in #🙋｜general-help
Editing index.js file in.nuxt project
Hello I would like to add bootstrap to my porject so i added the import into the index.js file to make it globally accessible. But somehow the import gets deleted after a while. Is is possible to edit the index.js file at all? Should i create a new file somewhere else?
Maybe some can help me 🙂
2 replies
