Still cannot get Authorization to work

I am currently developing a new web application with Vue.js and I am using axios for the REST API communication.

The API is on a server protected by basic auth and I cannot manage to get axios working with the Authorization header.

I tried it the way as described in https://github.com/axios/axios/issues/1769 and it did not work:

    const axiosInstance = axios.create({
      //method: 'GET',
      baseURL: process.env.API_BASE_URL,
      'Content-Type': 'application/json'
    });

    console.log(axiosInstance.defaults.headers);

// Alter defaults after instance has been created
    axiosInstance.defaults.headers.common['Authorization'] = 'Basic xxxx';
    axiosInstance.defaults.headers.common['X-ABC'] = "bla bla bla";

    axiosInstance.get(url)
    .then(response => {
      this.groups = response.data
    })
    .catch(e => {
      console.log(e);
      this.errors.push(e)
    });

I tried it like this and it did not work

    axios.get(url, [{
      headers: {
        "Authorization": "Basic xxxx"
      }
    }])
    .then(response => {
      this.groups = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })

I tried it like this and it did not work

    axios({
      "url": url,
      "method": "GET",
      "headers": {
        "Authorization": "Basic xxx"
      }
    })
    .then(response => {
      this.groups = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })

They all return 401 HTTP error.

I am hitting my limit frustrated because to what the problem is.

Can anybody help me give me a very clear example and tell me where the problem lies?

Looking at the console, it seems the headers do not get sent out!

Context

• axios version: e.g.: v0.18.0
• Environment: e.g.: v6.12.3, Mac OS SX

[AnnoyedDeveloper]

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. is displayed in the console.

Might this be a problem on the server side, that CORS is not enabled but chrome still prevents?

[gcox]

@AnnoyedDeveloper axios has a documented option for basic authentication called auth. It is documented in the request config section of the readme.

From the readme:

  // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
  // This will set an `Authorization` header, overwriting any existing
  // `Authorization` custom headers you have set using `headers`.
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

So, something like this:

axios({
  method: 'get',
  url: url,
  auth: {
    username: 'your username',
    password: 'your password'
  }
})