Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to add global headers with `onRequest` when using $fetch.create

See original GitHub issue

With axios, one can add global headers to config just like below

const instance: AxiosInstance = axios.create({
  baseURL: baseUrl,
  withCredentials: true,
});

// Add a request interceptor
instance.interceptors.request.use(
  function (config) {
    const token = ls.getItem("alva.accessToken");
    config.headers = {
      Authorization: `Bearer ${token}`,
    };

    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

Issue Analytics

State:
Created a year ago
Reactions:3
Comments:6

Top GitHub Comments

5reactions

johannschopplichcommented, Jul 18, 2022

Another example to re-use other headers:

export const useApi = $fetch.create({
  async onRequest({ options }) {
    const authStore = useAuthStore();
    if (!authStore.isLoggedIn) return;
    await authStore.refresh();
    options.headers = new Headers(options.headers);
    options.headers.set("Authorization", `Bearer ${authStore.idToken}`);
  },
});

0reactions

Valar103769commented, Dec 6, 2022

export const useCustomFetch = $fetch.create({
  baseURL: 'http://localhost:4000/',
  async onRequest({ options }) {
    const count = 0;
    options.headers = {
      customs: `count: ${count}`,
    }
  },
})

i think this can overwrite else headers