Sending a token using axioms

In my responsive application, I use axios to execute REST api requests.

But it cannot send an authorization header with the request.

Here is my code:

tokenPayload() { let config = { headers: { 'Authorization': 'Bearer ' + validToken() } } Axios.post( 'http://localhost:8000/api/v1/get_token_payloads', config ) .then( ( response ) => { console.log( response ) } ) .catch() } 

Here, the validToken() method will simply return the token from the browser memory.

All requests have 500 error responses saying that

Token cannot be parsed from request

from the back-end.

How to send an authorization header with each request? Could you recommend any other module with a response?

+56
rest reactjs axios token access-token
source share
9 answers
 var config = { headers: {'Authorization': "bearer " + token} }; var bodyParameters = { key: "value" } Axios.post( 'http://localhost:8000/api/v1/get_token_payloads', bodyParameters, config ).then((response) => { console.log(response) }).catch((error) => { console.log(error) }); 

The first parameter is the URL.
The second is the JSON body that will be sent along with your request.
The third parameter is the headers (by the way). This is also JSON.

+59
source share

Here is a unique way to set the authorization token in axios. Setting up a configuration for each axios call is not a good idea, and you can change the default authorization token:

 const axios = require('axios'); axios.defaults.baseURL = 'http://localhost:1010/' axios.defaults.headers.common = {'Authorization': 'bearer ${token}'} export default axios; 

edit

Some APIs require a channel to be recorded as a channel, so you can do:

 axios.defaults.headers.common = {'Authorization': 'Bearer ${token}'} 

Now you do not need to set the configuration for each API call. Now an authorization token is set for each axios call.

+29
source share

The second axios.post parameter is data (not config ). config is the third parameter. See below for more details: https://github.com/mzabriskie/axios#axiosposturl-data-config

+22
source share

You can create a config once and use it everywhere.

 const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'Authorization': 'Bearer '+token} }); instance.get('/path') .then(response => { return response.data; }) 
+11
source share

Using the Axios interceptor:

 const service = axios.create({ timeout: 20000 // request timeout }); // request interceptor service.interceptors.request.use( config => { // Do something before request is sent config.headers["Authorization"] = "bearer " + getToken(); return config; }, error => { Promise.reject(error); } ); 
+10
source share

If you want some data after passing the token in the header, try this code

 const api = 'your api'; const token = JSON.parse(sessionStorage.getItem('data')); const token = user.data.id; /*take only token and save in token variable*/ axios.get(api , { headers: {"Authorization" : 'Bearer ${token}'} }) .then(res => { console.log(res.data); .catch((error) => { console.log(error) }); 
+5
source share

can anyone help me?

xhr.js: 166 GET http: // localhost: 3000 / users 422 (REQUIRED ESSENCE)

0
source share

This works, and I need to set the token only once in my app.js :

 axios.defaults.headers.common = { 'Authorization': 'Bearer ' + token }; 

Then I can make queries in my components without setting the header again.

"axios": "^0.19.0",

0
source share

This is what I came across too. The token you are passing is incorrect.

Just Hardcode the token and pass, you will get the correct response. But if token is not passed in single quote '', then it will surely fail. It must be in format 'Authorization': 'Bearer YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ', where after Bearer one space must be present, also single

Just hardcode the token and go through, you will get the correct answer. But if the token is not transferred in a single quote, '' then it will certainly fail. It should be in the "Authorization" format: "Media YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MMI4MDJkNQ", where one space should be, one space must be present, one space must be present, one space must be present, D there must be one space inside enclosed in quotation marks, there must be one space, [D1, D1], inside should be one [1], and [1] must be in quotation marks;
 var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ"; var headers = { Authorization: "Bearer " + token, Accept: "application/json, text/plain, */*", "Content-Type": "application/json" }; 

IMP: the above code will work, but if you send something like:

Authorization: Media + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ, a crash will occur

or ----- the code below will also fail, I hope you understand the main difference

 var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ; var headers = { Authorization: "Bearer " + token, Accept: "application/json, text/plain, */*", "Content-Type": "application/json" }; 
-one
source share

All Articles