Proxying API request to a backend with Nuxt 3
30/05/2022 in #Vue #Nuxt
Use a catch-all server API endpoint server/api/[...].js
and make sure to transfer required headers from the client to the backend.
import { createError, useBody, appendHeader } from 'h3';
export default defineEventHandler(async (event) => {
const config = useRuntimeConfig();
if (!config.apiBaseUrl) {
throw new Error('Missing `runtimeConfig.apiBaseUrl` configuration.');
}
const { method, url, headers } = event.req;
const body = method !== 'GET' && method !== 'HEAD' ? await useBody(event) : undefined;
try {
const response = await $fetch.raw(url, {
method,
baseURL: config.apiBaseUrl,
headers: {
'content-type': 'application/json',
cookie: headers.cookie,
},
body,
});
for (const header of ['set-cookie', 'cache-control']) {
if (response.headers.has(header)) {
appendHeader(event, header, response.headers.get(header));
}
}
return response._data;
} catch (error) {
return createError({
statusCode: error.response.status,
statusMessage: error.message,
data: error.data,
});
}
});