In my nextjs application, I am trying to access the response headers of an HTTP request. While I can view all the response headers in the browser's devtools under the network section, I am unable to fetch them within the actual code. The only headers that are being returned are the content-length and content-type headers.
You can see the response headers in the devtools here.
Below is the code snippet for the request (client-side rendering):
import axios from 'axios'
const api = axios.create({
baseURL: process.env.NEXT_PUBLIC_BASE_URL,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
})
const getProducts = async () => {
const response = await api.get(`/all-products`)
return {
data: response.data,
headers: response.headers
}
}
export default {
getProducts,
}
I have attempted to add the following to my next.config.js file:
/** @type {import('next').NextConfig} */
const nextConfig = {
env: {
theme: 'DEFAULT',
currency: 'USD',
NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
},
publicRuntimeConfig: { theme: 'DEFAULT', currency: 'USD' },
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**',
},
],
},
compiler: {
styledComponents: true,
},
reactStrictMode: false,
output: 'standalone',
async headers() {
return [
{
source: '/(.*)',
headers: [
{ key: 'Access-Control-Expose-Headers', value: 'Date' },
],
},
];
},
}
module.exports = nextConfig
Any suggestions or solutions to this issue?
EDIT: The code works correctly with server-side rendering, but the response headers are not accessible on the client-side.