How to set username and password in axios get method header

Question

I want to fetch some data from a server via axios in my react project. When i put the url on browser and hit enter browser ask me username and password and after that, i can see the json data. But i dont know how to set the password and username in axios header in a get method. I have searched it in many forums and pages,especially this link didin't help me: Sending axios get request with authorization header . So finally i tried (many things before this, but i was more confused):

componentDidMount() {
   axios.get('http://my_url/api/stb', {auth: {
    username: 'usrnm',
    password: 'pswrd'
}})
   .then(function(response) {
       console.log(response.data);
       console.log(response.headers['Authorization']);
   }).catch(err => console.log(err));
}

And i can not get anything. I get this error in console:

Error: Network Error
Stack trace:
createError@http://localhost:3000/static/js/bundle.js:2195:15
handleError@http://localhost:3000/static/js/bundle.js:1724:14

Actually, the api documentation mentioned that with these words:

If there is no header or not correct data - server's answer will contain HTTP status 401 Unauthorized and message:

< {"status":"ERROR","results":"","error":"401 Unauthorized request"}

For successful authentification is sufficient to add in every request header to the API:

Authorization: Basic <base64encode("login":"password")>

The weird thing is, when i use postman, the response send me a "401 unauthorized" response below the body section. But i can not see any 401 errors in browser's console.

I think url is password protected not the api, please confirm that, or pllease share the url for api — Vivek Doshi, Oct 04 '17 at 17:07
sorry i cant share the url and yes, url is protected and as i mentioned above, it says that we must set an Authorization in get method's header. — escalepion, Oct 04 '17 at 17:11
then first you have to login , login will be accessible without headers , that wil return token , via this token we'll be able to access other apis — Vivek Doshi, Oct 04 '17 at 17:20
you can try something like so `axios.get('http://usrnm:pswrd@my_url/api/stb')` — Amr Aly, Oct 04 '17 at 17:24
@UXDart yes i had cors error in chrome but there was no cors error on firefox but now, i have cors error all browsers. And so is the way that i made is true above? — escalepion, Oct 04 '17 at 17:27
the auth in axios is ok... but you will need to enable CORS in your server — UXDart, Oct 04 '17 at 17:31
and what does that mean: uthorization: Basic .. i think i have two problems, one of them is cors, the other is: i cant do authorization right — escalepion, Oct 04 '17 at 17:51

score 11 · Accepted Answer · answered Oct 04 '17 at 19:53

Ok i found the solution. As i mentioned in the comments that i wrote for my question, there was a cors problem also. And i figured out that cors problem was appearing because of that i can not authorize correctly. So cors is a nature result of my question. Whatever.. I want to share my solution and i hope it helps another people because i couldent find a clear authorization example with react and axios.

I installed base-64 library via npm and:

componentDidMount() {
        const tok = 'my_username:my_password';
        const hash = Base64.encode(tok);
        const Basic = 'Basic ' + hash;
       axios.get('http://my_url/api/stb', {headers : { 'Authorization' : Basic }})
       .then(function(response) {
           console.log(response.data);
           console.log(response.headers['Authorization']);
       }).catch(err => console.log(err));
    }

And dont forget to get Authorization in single quotes and dont struggle for hours like me :)

Anyway, you can use `btoa(tok)` without installing base-64 library also :D — l2aelba, Sep 20 '18 at 10:22
For a React-Python3Flask-Nginx-AWS build the flask_cors library works with this answer without changing any additional moving parts (ie nginx) as of Feb 2019. — Julian Wise, Feb 19 '19 at 06:13
@l2aelba solution works if you are working through the CLI, but I see you're working in React so instead use `Buffer.from(tok).toString('base64')` if you don't want to install an extra package. — Colin, Feb 24 '22 at 19:45

How to set username and password in axios get method header

1 Answers1