How to change axios header Accept-Languags with next-i18next out of a component?

I try to export a custom function setLanguageHeader to change my axios header Accept-Language

I wrap up axios file like this:

requests.ts:

import axios, { AxiosRequestConfig } from 'axios';

let baseURL = 'My test API url';
const timeout = 30000;

const serviceWithSessing = axios.create({
    timeout,
    baseURL,
    withCredentials: true,
});

serviceWithSessing.interceptors.request.use(
    (config: any) => {
        let customHeaders: any = {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': true,
            'Accept-Language': 'zh-TW',
        };
        config.headers = customHeaders;
        return config;
    },
    error => {
        console.log('interceptors error', error);
        Promise.reject(error);
    }
);

// Function to set the language header
const setLanguageHeader = (language: 'zh' | 'en-US' | 'jp') => {
  serviceWithSessing.defaults.headers.common['Accept-Language'] = language;
};

serviceWithSessing.interceptors.response.use(
    (response: any) => {
        return response;
    },
    error => {
        return error;
    }
);

// axios return data
interface axiosTypes<T> {
    data: T;
    status: number;
    statusText: string;
}

// custome response Type
interface responseTypes<T> {
    code: number;
    msg: string;
    result: T;
}

const requestHandlerWithSession = <T>(
    method: 'get' | 'post' | 'put' | 'delete',
    url: string,
    params: object = {},
    config: AxiosRequestConfig = {}
): Promise<T> => {
    let response: Promise<axiosTypes<responseTypes<T>>>;
    switch (method) {
        case 'get':
            response = serviceWithSessing.get(url, { params: { ...params }, ...config });
            break;
        case 'post':
            response = serviceWithSessing.post(url, { ...params }, { ...config });
            break;
        case 'put':
            response = serviceWithSessing.put(url, { ...params }, { ...config });
            break;
        case 'delete':
            response = serviceWithSessing.delete(url, { params: { ...params }, ...config });
            break;
    }

    return new Promise<T>((resolve, reject) => {
        response
            .then((res: any) => {
                const data = res.data;
                const status = res.status;
                if (status !== 200 && status !== 201 && status !== 204) {
                    if (status == 401) {
                        console.log('Error handle...');
                    }

                    let e = JSON.stringify(data);
                    console.log(`Request error：${e}`);

                    if (res.response.data) {
                        resolve(res.response.data);
                    } else {
                        reject(data);
                    }
                } else {
                    // return correct data
                    console.log('data', data);
                    resolve(data as any);
                }
            })
            .catch(error => {
                let e = JSON.stringify(error);
                console.log(`Internet error：${e}`);
                reject(error);
            });
    });
};

const requestWithSession = {
    get: <T>(url: string, params?: object, config?: AxiosRequestConfig) =>
        requestHandlerWithSession<T>('get', url, params, config),
    post: <T>(url: string, params?: object, config?: AxiosRequestConfig) =>
        requestHandlerWithSession<T>('post', url, params, config),
    put: <T>(url: string, params?: object, config?: AxiosRequestConfig) =>
        requestHandlerWithSession<T>('put', url, params, config),
    delete: <T>(url: string, params?: object, config?: AxiosRequestConfig) =>
        requestHandlerWithSession<T>('delete', url, params, config),
};

export { request, requestWithSession, setLanguageHeader, serviceWithSessing };

Then I trigger setLanguageHeader in _app.tsx

import { i18n } from 'next-i18next';
import { setLanguageHeader } from '@/api/request';

setLanguageHeader(i18n?.language);

Call API like this:

import { request, requestWithSession, serviceWithSessing } from './request';

export const GetMarketDetail = <T>(params: { slug: string }) => {
    console.log('serviceWithSessing =>', serviceWithSessing.defaults);
    return requestWithSession.get<T>(
        `/markets/${params.slug}`,
        {},
        {
            timeout: 15000,
        }
    );
};

If I change language to jp, I can check serviceWithSessing.defaults.headers.common is

{
  Accept: "application/json, text/plain, */*"
  Accept-Language: "jp"
  Content-Type: undefined
}

But If I open chrome debugger to check network I can see Accept-Language doesn’t change

I check my instance serviceWithSessing Accept-Language is changed, but chrome network Accept-Language doesn’t change. How to fix it ?

 let customHeaders: any = {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': true,
            'Accept-Language': 'zh-TW', --> Read from cookies
        };
        config.headers = customHeaders;
        return config;

You need to use cookies/local storage to store the current selected language and set it in the header dynamically. You can also set the fallback value if you dont have any cookies