Unable to set JWT header to axios

Question

I have Django REST as a backend. And I need to query the database over GET.
Problem:
Header does not in the GET method. Therefore Django returns me the "Authentication credentials were not provided."

Question:
Where am I wrong?

export function fetchCompanies(token, callback) {
  const instance = axios.create({
    baseURL: `${ROOT_URL}`,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'jwt '.concat(token)
    }
    // headers: `{content-type=application/json&authorization='+${jwtReady}}`
    // headers: JSON.stringify(
    //   {'Content-Type':'application/json','Authorization': jwtReady}
    // )
  });

  const request = instance.get('/api/companies/')
    .then((res) => {
      console.log(res);
      callback(res);
    })
    .catch((err) => {
      console.log(err);
      callback(err.response);
    });
  return{
    type: FETCH_COMPANIES,
    payload: request
  }
}

References:
https://github.com/axios/axios#axiosgeturl-config

I add my `Postman` picture to confirm my eyes. And also `Copy&paste` since I have been struggling with this issue for 4 hours by now. My eyes are started to blurred now. — joe, Dec 11 '17 at 11:00
What are you using in your backend to parse the Authorization header? — maxpaj, Dec 11 '17 at 11:58
@maxpaj Thank you for your response. I am done with this. The problem comes from backend side. — joe, Dec 12 '17 at 03:22

Grynets · Answer 1 · 2017-12-11T11:55:42.383

1

I've had the same problem. Don't know how to fix it correctly, but I've changed code to this:

var jwtReady = 'jwt '.concat(token);
...
headers: {'content-type=application/json&authorization='+jwtReady}

Also you can try to use

JSON.stringify({'Content-Type':'application/json','Authorization': 'jwt '.concat(token)}

EDIT:
Try to write it like this:

const querystring = require('querystring');

const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'jwt '.concat(token)
}

axios({
  method: 'get',
  url: `${ROOT_URL}/api/companies/`,
  headers: querystring.stringify(headers)
})
  .then((res) => {
    console.log(res);
    callback(res);
  })
  .catch((err) => {
    console.log(err);
    callback(err.response);
  });

edited Dec 11 '17 at 11:55

answered Dec 11 '17 at 10:52

Grynets

2,477
1
17
41

I had tried your attempts. Browser does not shoot out the `request` – joe Dec 11 '17 at 11:16
TypeError: name.toUpperCase is not a function at processHeader (normalizeHeaderName.js:7) at Object.forEach (utils.js:218) at normalizeHeaderName (normalizeHeaderName.js:6) at transformRequest (defaults.js:32) at transform (transformData.js:16) at Object.forEach (utils.js:224) at transformData (transformData.js:15) at dispatchRequest (dispatchRequest.js:37) at – joe Dec 11 '17 at 11:31
@Sarit error occurred in your normalizeHeaderName.js file, at line 7. That's another file. – Grynets Dec 11 '17 at 11:33
I did not made that file. So you are saying dependency is broken? – joe Dec 11 '17 at 11:42
@Sarit, Updated my code, please try with `querystring` – Grynets Dec 11 '17 at 11:56
I can not user `require` in Reactjs https://stackoverflow.com/questions/32623573/what-is-require-function-is-reactjs – joe Dec 11 '17 at 12:09
@Sarit, it'd be better if you add react tag to your question. OK, can you use node-fetch instead of axios? Or you can try to transform your get request to post with data, instead of headers – Grynets Dec 11 '17 at 12:28
Thank you very much for your response – joe Dec 20 '17 at 13:39

MBehtemam · Answer 2 · 2017-12-11T16:50:42.123

in my application i'm done this work like below first i create a file with name AxiosConfig.js and the code is like this, this function read jwt that i stored in local storage and set it on axios config

/**
 * this file contains configuration for Axios Library
 */
 import axios from 'axios'

 const AxiosConfig = (config = axios.defaults) =>{
    if(localStorage.getItem('jwtToken')){
    config.headers.authorization = `Bearer ${localStorage.getItem('jwtToken')}`
   }
return config;
  }
export default AxiosConfig;

now i create another file for calling like this :

import axios from "axios";
import axiosConfig from "./AxiosConfig";
 const headers = {};
 class AppsAPI {
 static getAllApps(userId) {
   return axios
    .post("someurl", {}, axiosConfig()) //===> Here i set axios config
  .then(res => res.data)
  .catch(err => console.log(err));
  }
}
export default AppsAPI;

Thank you for your good example. I am done with this. The problem comes from backend side. — joe, Dec 12 '17 at 03:21

score 0 · Accepted Answer · answered Dec 11 '17 at 13:54

I have to installed this thing. The problem comes from Backend. I was misled by be able to get token and POST to form without headers Which is fine for the login mechanic. By that I though my configuration was right, but actually when @panigrap from reactjs/redux gitter channel mentions to me again.

https://github.com/ottoyiu/django-cors-headers/

Unable to set JWT header to axios

3 Answers3