Menu
I've created axios interceptor which is responsible for adding token before every request is send to my rest API.
import axios from 'axios';
import { store } from '../store/store';
export default function execute() {
axios.interceptors.request.use(function(config) {
const token = store.state.token;
if(token) {
config.headers.Authorization = `Bearer ${token}`;
console.log(config);
return config;
} else {
console.log('There is not token yet...');
return config;
}
}, function(err) {
return Promise.reject(err);
});
}
As you can see in line 2 I'm importing vuex storage and this is actually place where my token is deposited. In line 8 I'm actually adding this token to config object and then in next line I'm consoling it out.
It is executed in my main.js file like so:
import interceptor from './helpers/httpInterceptor.js';
interceptor();
The token is present in config object which I see in my console (because i consoled config object):
It runs every time that I make some request to rest API as expected. If token exist (after login) it should add token header to every request. Unfortunately it doesn't add it although it is present on config object which makes me a bit confused.
It doesn't actually add token to real request as I can see in network tab:
This screenshot is of course taken after login so the token is already in vuex storage and it consoled out config (part of interceptor) after I executed logout function (which call rest API).
In result I have 400 (Bad request) status in response from my rest API because I didn't sent token.
EDIT!!!
I was thinking what can I add to this question to make it better. I think that this is impossible to create demo plunker so I decided to create little repository demo which you can download and see issue for your eyes. I hope it'll help to solve the problem!
248
To send an Axios POST request with headers, you need to use the headers option. With axios. post() , the first parameter is the URL, the 2nd parameter is the request body, and the 3rd parameter is the options .
use method to update each request header and set the access token in the Authorization HTTP header. We target the Authorization header from the config. headers object and set a Bearer token, which is stored in localStorage , as its value. We can also call the axios.
To set headers in an Axios POST request, pass the third object to the axios. post() call. To set headers in an Axios GET request, pass a second object to the axios. get() call.
Default headers Your application may have multiple API requests, and you may want to set request headers for all of them. Instead of adding the headers to each request, you can put them as default headers, and they will apply to all the requests. To do so, use the defaults. headers property of the axios object.
I assume that you are familiar with Axios libary, Access tokens and Refresh tokens. Axios interceptors allow you to run your code or modify the request and/or response before the request and/or response is started. It allows you to write or execute a piece of your code before the request gets sent.
However, this option does not allow us to pass in the configs. To correctly set up the headers for each request, we can create an instance of Axios using axios.create and then set a custom configuration on that instance:
You can intercept requests or responses before they are handled by then or catch. If you need to remove an interceptor later you can. You can add interceptors to a custom instance of axios. const instance = axios.create(); instance.interceptors.request.use(function () {/*...*/});
Config is the object of AxiosRequestConfig which contains URL, base URL, headers request, body data, response type, timeout, etc. In short, it contains all of the information about your request. I am getting an Access token using localStorageService and modifying the Config object’s headers.
I figured it out.
I didn't know that there is something called preflight request which is executed before real request to rest API. If preflight request fail it will not accept/receive more headers. This is why I didn't see it on real request in chrome console network tab but it was in config object which was console.loged in interceptor.
Same in repository demo which was calling not existing URL so preflight request failed there as well. While creating this demo I had no idea that such thing as preflight request exist so I was sure that it doesn't matter if I'll call some existing URL endpoint or fictitious one, I thought that in both way I should be able to see request header there.
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
