Error in setting headers in axios and react

Question

I have tried many of the stack overflow solution but I am unable to solve this problem

My code is below

helper/axios.js

import axios from "axios";

const instance = axios.create({
  baseURL: process.env.REACT_APP_BACKEND_URI,
  timeout: 1000,
  headers: {},
});

export default instance;

App.js

import axios from "./helper/axios";
 
const { user } = useAppSelector((state) => state);

axios.interceptors.request.use((config: any) => {
    if (user.isLoggedIn) {
      config.headers.authorization = user.accessToken;
      config.headers["x-refresh"] = user.refreshToken;
      console.log(config);
    }
    return config;
  });

[Image of console] [1]: https://i.sstatic.net/fWAIb.png

Shri Hari L · Accepted Answer · 2022-02-16 06:56:44Z

1

Maybe you could try importing your store directly inside the file.

I don't thing useSelector can be called outside the Functional Component.

Example,

import axios from "./helper/axios";
import store from "./your_path_to_store_file"

axios.interceptors.request.use((config: any) => {
    const { user } = store.getState();
    if (user.isLoggedIn) {
      config.headers.authorization = user.accessToken;
      config.headers["x-refresh"] = user.refreshToken;
      console.log(config);
    }
    return config;
});

By doing so, we might get the latest value from the store.

edited Feb 16, 2022 at 6:56

answered Feb 16, 2022 at 6:52

Shri Hari L

4,9732 gold badges8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harshit Over a year ago

I tried that . But the following error occur "React Hook "useAppSelector" cannot be called inside a callback"

Shri Hari L Over a year ago

Edit the answer. Try it now.

Collectives™ on Stack Overflow

Error in setting headers in axios and react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related