0

I have a component called Login.js There I import Axios libray normal way and it works like this.

import axios from 'axios';

const data = await axios.post('/user/login/', {
        email: e.email,
        password: e.password,
      });

enter image description here

Getting 404 is fine because I didn't set any base URL for the Axios. Please note all the requests, response headers here.

Then I try to created Axios instance inside a lib folder and import it like this

/src/lib/axios.js

import axios from "axios";

const baseUrl = process.env.REACT_APP_BE_URL;

const axiosInstance = axios.create({
  baseURL: baseUrl,
});

export default axiosInstance;

I import this instance instead of normal Axios import.

import axios from 'libs/axios';

Now I see the request like this a lot of properties missing in the request and this isn't working enter image description here

How do I fix this?

Any help thanks in advance.

Estus Flask
  • 179,509
  • 61
  • 360
  • 499
Pathum Kalhan
  • 5,597
  • 21
  • 62
  • 114

1 Answers1

-1
const axiosInstance = axios.create({
  baseURL: baseUrl,
  // here you can pass other options to axios instance.
});

Or you can use request interceptors with axios

axiosInstance.interceptors.request.use(
  config => {
    config.headers['X-Header'] = true


    return config
  },
  error => {
    console.log(error) // for debug
  }
)
gguney
  • 2,054
  • 1
  • 10
  • 24
  • How does this answer the question? OP is already creating an Axios instance with `baseURL` and they haven't mentioned anything at all about required headers – Phil Mar 08 '22 at 06:29
  • He said "Please note all the requests, response headers here." I showed how to add all custom headers. – gguney Mar 08 '22 at 06:35
  • There are no custom headers in OP's requests – Phil Mar 08 '22 at 06:51