are you using a client component or mounting the component that is doing the fetch as a child of a client component?

can you post the code that does the fetching

Where are u actually hosting the nextjs app and express apps? On vercel?
And are u seeing the GET to /categories actually being made in ur browser devtools network tab? Or do u just see the error in the browser console

hi guys, thx for your reply,
mycontact page is a client component, but my ApiClient (where i make the axios call to the backend) is a server component
I'm hosting on a vps

the code is like
the page

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { apiClient } from '@/lib/api'

export function ClientNavbar() {
const router = useRouter()
...
useEffect(() => {
async function fetchCategories() {
try {
const response = await apiClient.getCategories()

the apiclient

import axios, { AxiosInstance } from 'axios'

class ApiClient {
private client: AxiosInstance

constructor() {
this.client = axios.create({
baseURL: process.env.NEXT_PUBLIC_API_URL,
withCredentials: true,
timeout: 30000,
})


this.client.interceptors.request.use((config) => {
if (typeof window !== 'undefined') {
// Parse cookies to get auth-store
const cookieString = document.cookie
.split('; ')
.find((row) => row.startsWith('auth-store='));

if (cookieString) {
try {
const token = cookieString.split('=')[1];
console.log('🔍 ApiClient - Token from cookie:', token);
if (token) {
config.headers.Authorization = Bearer ${token};
}
} catch (error) {
console.error('Error parsing auth-store cookie:', error);
}
}
else {
}
}
return config;
})

}

async getCategories() {
const response = await this.client.get('/categories')
return response.data
}
...


I fixed it by puting NEXT_PUBLIC_API_URL = mywebsite.com/api
But I still want to now why it executes on the browser ?
The goal that i want is that my api will be invisible from the outside, only my nextjs server component will be able to call through a localhost adress
I don't know if i made myself clear ?

Youve explicitly made ur api client client-side only by checking for typeof window !== undefined. Youre also using the api client on the client component directly. So yeah the request is gonna be made from the browser

If this was made using ai i highly recommend doing some research of ur own on the differences between client and server components

Youll have to rewrite your api client completely

Also i dont see a reason why you wouldnt want your client side to be able to reach your api tbh. As long as its properly secured its fine to make it public. For internal routes or routes requiring secrets that shouldnt be exposed to the client, u can stil do the fetching on the server

the window thing was due to some cookies ( token login) i was first intercepting to save in localstorage ... but since i went to store the token through the backend directly, i forgot to delete this part !
yeah of course i made research to choose my stack of framework for this project ... its the first time using nextjs , but i went all through this chanel course and other https://www.youtube.com/watch?v=b4ba60j_4o8&list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY
thx for your help GetFookedLad

Np and good luck

Btw this tutorial is for nextjs 15, current version is 16 and theres some relatively big changes with react 19 as well, just to let u know

ok nice, i'll have a look later, rn i'm with hotfixes of my prod v1 release x)